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

Question

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

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

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

我刚刚开始学习 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 或尝试使用空数组进行初始化。

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

How to Iterate the options of the mat-select tag?

angular

typescript

angular-material

ngfor