Currently, I am attempting to iterate through two arrays. One array is used to create select-fields, while the other array populates options in each select-field.
<div *ngFor="let subject of subjects" class="input-field col s6"> //looping through all subjects
<mat-form-field>
<mat-label>{{subject}}</mat-label> /*creating a select-field for each subject*/
<mat-select [(value)]="selectedStaff">
<mat-option *ngFor="let faculty of facultyNames" [value]="faculty" > /*iterating over facultyNames to fill options*/
{{faculty}} /*filling out the options*/
</mat-option>
</mat-select>
</mat-form-field>
</div>
The select-fields and options are being generated as intended. However, when I choose an option in one select-field, it changes the values of all other select-fields to the same choice. This doesn't allow for individual selection in each field.
As a beginner in Angular, I am struggling to find an alternative approach to solve this issue. Any guidance or suggestions would be highly appreciated. Thank you.https://i.sstatic.net/qzf6o.pnghttps://i.sstatic.net/ipOMU.png