Angular 无法将动态数据绑定到角度材质选择窗体中

我无法使用Angular8使用Angular材质选择表单动态显示数据。我的代码如下

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>

---

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

而不是选中try using将值设置为“”

设置mat select值

<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>

---

请尝试使用将值设置为“”，而不是选中“”

设置mat select值

<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

：

例：

不是

M（男性）

，这与用于绑定matselect值的

M

完全不同

---

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

对于

控件的性别控件，必须使用

formControlName

：

例：

不是

M（男性）

，这与用于绑定matselect值的

M

完全不同

---

我不明白你的答案。我的要求是，当用户点击编辑按钮时，这两个值将被设置为相应的字段。确定更新答案不理解您的答案。我的要求是，当用户点击编辑按钮时，这两个值将被设置为相应的字段。好的，更新答案。这篇文章有一些问题。他们已经在你之前的100多篇文章中被纠正了，这就是为什么你有时会被否决的原因。（1） 您的每个文件名都有拼写错误。（2） 文件名在引号块中，但不是引号。（3） 你一直说你在“解释”你的代码，你已经被告知很多次，这不是正确的词。您正在“显示”或“提供”您的代码。我不明白你为什么不愿意听取基本的、合理的建议。这篇文章有一些地方不对劲。他们已经在你之前的100多篇文章中被纠正了，这就是为什么你有时会被否决的原因。（1） 您的每个文件名都有拼写错误。（2） 文件名在引号块中，但不是引号。（3） 你一直说你在“解释”你的代码，你已经被告知很多次，这不是正确的词。您正在“显示”或“提供”您的代码。我不明白你为什么不愿意听取基本的、合理的建议。

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"

                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>

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