Angular 材料 Select 默认值未被选中

Question

I have a select box in which i have binded the array of objects. I want to set a default intial value to it ie the 0th position value, i have tried using [(value)] and [(ngModel)] but it doesnt work. Am i missing something?

HTMl -

<mat-form-field>
      <mat-label>Select</mat-label>
      <mat-select (selectionChange)="onLifeChange($event)" [(value)]="lifeId">
        <mat-option *ngFor="let life of lifeData" [value]="life">{{life?.fxlifeid}}</mat-option>
      </mat-select>
    </mat-form-field>

TS -

 getLives(): void {
    this.insuredService.getLives(caseId).subscribe(res => {
      this.lifeData = res;
      this.numberOfLife = this.lifeData.length;
      this.lifeId = this.lifeData[0].fxlifeid;
    })
  }

I am calling getLives on ngOnInit.

Answer 1

Create a FormControl object in your component.ts file

formCotrolName = new FormCotrol();

In component.html file assign this object to mat-select control

[formCotrol]='formCotrolName'

Now in your component.ts file, we get get the value from that dropdown by using formCotrol.value property. But this value property is read only. To set value we need use setValue method

formControl.setValue(value);