[英]Angular Material : Display empty option(None) in Mat-Select on initial page load when value is null
Need to display the empty (None) option in Material Select element when the item is null.物料为null时需要在Material Select元素中显示空(None)选项。
<mat-label>Status</mat-label>
<mat-select formControlName="statusId">
<mat-option>None</mat-option>
<mat-option *ngFor="let item of statuses" [value]="item.id">
{{ item.name }}
</mat-option>
</mat-select>
</mat-form-field>```
As seen in above snippet I need to display the "None" option selected by default when the page loads.
StackBlitz So, you can add a empty value to the None option. StackBlitz因此,您可以向 None 选项添加一个空值。
<mat-select [formControl]="foodControl" name="food">
<mat-option value="">None</mat-option>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
And, in the ts, you can initialize the control with empty value like this foodControl = new FormControl('');
并且,在 ts 中,您可以像这样用空值初始化控件foodControl = new FormControl('');
same thing can be done with ngModel as well. ngModel 也可以做同样的事情。 (included in the StackBlitz) (包含在 StackBlitz 中)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.