When my user signs up in my angular application, he has to setup his account by adding instruments to his user.

A Instrument looks like this:

export interface Instrument {
    id: string;
    name: string;
    groupId: string;
}

The Idea is, that there is a list of dropdowns, which at first only consists of only one dropdown. Beneath the dropdown there is a button, which adds a empty dropdown. I already achieved this with my code. However when i select a Instrument in the first dropdown and add another instrument via the button, the option in the first dropdown is reset and it looks like nothing is selected (altough the array didn't change besides the new empty value).

Here is my code:

HTML

<div 
    *ngFor="let userInstrument of userInstruments; let id = index"
>
    <mat-form-field appearance="fill" fxFlex>
        <mat-label>Instument</mat-label>
        <mat-select placeholder="Guitar" [(ngModel)]="userInstruments[id]" name="item">
            <mat-option value="">
                None
            </mat-option>
            <mat-option [value]="instrument.id" *ngFor="let instrument of instruments">
                {{instrument.name}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>
<p 
    id="add-instrument"
    (click)="addInstrument()"
>
    Add another instrument?
</p>

Typescript

  userInstruments: string[] = [];
  instruments: Instrument[] = [];

  constructor(private utilsDataSerivce: UtilsDataService) {
    this.utilsDataSerivce.loadInstruments();

    this.utilsDataSerivce.getInstruments$()
      .pipe(
        takeUntil(this.destroyed$)
      ).subscribe(i => {
        if (!!i) {
          this.instruments = i;
        }
      })
  }

  ngOnInit(): void {
  }

  addInstrument() {
    if (this.addInstrumentValid()) {
      this.userInstruments.push("");
    }
  }

CodePudding user response：

As Deepak Jha said in his comment, ngModel is going to be deprecated so i checked the angular material page and they are used [(value)]="binding" for the select instead of `[(ngModel)]=binding". That fixed my problem. Thanks!