无法将动态数据绑定到角度材质选择表单中

Question

我无法使用Angular8使用角度材料选择形式动态显示数据。我的代码如下。

product.componet.html：

<form [formGroup]="productForm" (submit)="saveProduct($event)" novalidate> 
<mat-form-field appearance="outline" class="col-lg-4 col-md-6 col-sm-12">
<mat-label>Product Name</mat-label>
<input matInput placeholder="Product Name" aria-label="Product Name" formControlName="Name" maxlength="70" required>
</mat-form-field>
<mat-form-field appearance="outline" class="col-lg-4 col-md-6 col-sm-12">
<mat-label>Gender</mat-label>
<mat-select
placeholder="Select Gender" 
aria-label="Select Gender" 
(selectionChange)="onGenderSelectionChanged($event)"
>
<mat-option *ngFor="let s of genders" [value]="s.Code">
<span *ngIf="!s.Code">
</span>
<span *ngIf="s.Code">
{{s.Name}}
</span>
</mat-option>
</mat-select>
</mat-form-field>
</form>

Product.componet.ts：

genders: any = [
'',
{
Code: "M",
Name: "Male"
},
{
Code: "F",
Name: "Female"
},
{
Code: "U",
Name: "Unisex"
}
];
this.productForm.setValue({
Name : String = 'Test product',
Gender: String = 'M(Male)'
})

我能够显示产品名称，但无法显示动态绑定的下拉值。我需要使用 Angular 8 动态显示下拉值。

Answer 1

发布的代码中很少有错误：

1. 必须对<mat-select>控件的性别控制使用formControlName：

前任：

Here
//////
<mat-select formControlName="Gender" placeholder="Select Gender" aria-label="Select Gender" (selectionChange)="onGenderSelectionChanged($event)">
<mat-option *ngFor="let s of genders" [value]="s.Code">
<span *ngIf="!s.Code"></span>
<span *ngIf="s.Code"> {{s.Name}}</span>
</mat-option>
</mat-select>

2. 虽然为 FormGroup 设置值不需要指定数据类型，但

this.productForm.setValue({
Name : 'Test product',
Gender: 'M'
});  

不是M(Male)这与M完全不同，您正在使用它来绑定 matselect 的值。

Working_Demo

Answer 2

不要选中尝试将值设置为 "

<span>                                        
{{s.Name}}                                    
</span>

而您的阵列为

genders: any = [
{
Code: "",
Name: ""
},
{
Code: "M",
Name: "Male"
},
{
Code: "F",
Name: "Female"
},
{
Code: "U",
Name: "Unisex"
}
];

设置垫子选择值

<mat-select placeholder="Select Gender" aria-label="Select Gender"  (selectionChange)="onGenderSelectionChanged($event)" formControlName="Gender">
<mat-option *ngFor="let s of genders" [value]="s.Code">
<span *ngIf="!s.Code"></span>
<span *ngIf="s.Code">
{{s.Name}}
</span>
</mat-option>
</mat-select>

将表单控件名称添加到垫子选择标记

formControlName="Gender"