-1

I load array of groups for mat-select over http. My .ts code look like this:

async ngOnInit(): Promise<void> {
    this.groups = await this.service.loadGroups();
    this.form = new FormGroup( 
        groupId: new FormControl(this.user.groupId || 0)
    );
}

public get groupId(): AbstractControl { return this.from.get('groupId'); }

and in my html:

<mat-form-field>
    <mat-select formControlName="groupId" [value]="resellerGroupId.value" required>
         <mat-option *ngFor="let group of groups" [value]="group.id">
             {{ group.name }}
         </mat-option>
     </mat-select>
</mat-form-field>

So when I load data like this I have no preselected value in mat-select. If the data is hardoced as an array of value - no problems, but when I add Promise it brokes. I can't understand why value on ui is not updated after the loadGroups() promise gets resolved.

Tyrcheg
  • 1
  • 8

1 Answers1

0

You need to use the async pipe with mat-option. Have a look at the autocomplete example to see how it's done.

G. Tranter
  • 16,766
  • 1
  • 48
  • 68