我在Angular material项目中有一个简单的选择选项表单字段:
component.html
<mat-form-field>
<mat-select [(value)]="modeSelect" placeholder="Mode">
<mat-option value="domain">Domain</mat-option>
<mat-option value="exact">Exact</mat-option>
</mat-select>
</mat-form-field>
其中,[(value)]="modeSelect"
绑定到component.ts文件中的modeSelect属性
我想让它在页面加载时默认选择<mat-option value="domain">Domain</mat-option>
。
ng-selected
对我不起作用
发布于 2020-03-20 03:11:49
这个问题困扰了我一段时间。我使用的是反应式表单,我用这种方法修复了它。PS。使用角度9和材质9。
在"ngOnInit“生命周期钩子中
1)从数组或对象文字中获取要设置为默认值的对象
const countryDefault = this.countries.find(c => c.number === '826');
在这里,我从我的countries数组中抓取了英国对象。
2)然后将formsbuilder对象( mat-select)设置为默认值。
this.addressForm.get('country').setValue(countryDefault.name);
3) Lastly...set绑定值属性。在我的例子中,我需要name值。
<mat-select formControlName="country">
<mat-option *ngFor="let country of countries" [value]="country.name" >
{{country.name}}
</mat-option>
</mat-select>
就像一种护身符。我希望它能帮上忙
发布于 2018-06-02 05:21:45
尝尝这个
<mat-form-field>
<mat-select [(ngModel)]="modeselect" [placeholder]="modeselect">
<mat-option value="domain">Domain</mat-option>
<mat-option value="exact">Exact</mat-option>
</mat-select>
</mat-form-field>
组件:
export class SelectValueBindingExample {
public modeselect = 'Domain';
}
另外,不要忘记在app.module中导入FormsModule
发布于 2020-03-30 17:10:05
我想在这里补充Narm的答案,并在她的答案下面添加了与评论相同的内容。
基本上,分配给( value )的值的数据类型应该与用于mat-options的value属性的数据类型相匹配。特别是如果有人使用*ngFor填充选项,如下所示
<mat-form-field fxHide.gt-sm='true'>
<mat-select [(value)]="heroes[0].id">
<mat-option *ngFor="let hero of heroes" [value]="hero.id">{{ hero.name }}</mat-option>
</mat-select>
</mat-form-field>
请注意,如果您将(value)="heroes.id“更改为(value)="heroes.name”,它将不起作用,因为数据类型不匹配。
这些是我的发现,如果需要,请随时纠正我。
https://stackoverflow.com/questions/50650790
复制相似问题