如何迭代 mat-select 标签的选项？

Question

我正在尝试迭代两个数组，一个用于创建必要的选择字段，另一个用于填充每个选择字段中显示的选项。

 <div *ngFor="let subject of subjects" class="input-field col s6"> //iterating through all the subjects
   <mat-form-field>
      <mat-label>{{subject}}</mat-label> /*creating select-field for each subject*/
         <mat-select [(value)]="selectedStaff">
             <mat-option *ngFor="let faculty of facultyNames" [value]="faculty" > /*iterating facultyNames to populate options*/
                 {{faculty}} /*populating options*/
             </mat-option>
         </mat-select>
     </mat-form-field>
  </div>

选择字段和选项按预期生成，但是当我在选择字段中选择一个选项时，其他选择字段的所有值也会更改为相同的选项。我无法为每个选择字段单独选择选项。

我刚刚开始学习 Angular，我找不到其他方法来实现它。 任何帮助将不胜感激。谢谢

Answer 1

问题是你所有选择的值都相同。

改变这个。

<div *ngFor="let subject of subjects" class="input-field col s6">

为

<div *ngFor="let subject of subjects; let i = index" class="input-field col s6">

和

 <mat-select [(value)]="selectedStaff">

对于

 <mat-select [(value)]="selectedStaff[i]">

在您的 ts 中，attr selectedStaff 需要是一个数组，subjects 的每个项目都有一个值，或者尝试使用空数组进行初始化。