Angular7，异步加载选项时选择指令不选择选项

Question

I have a select whose options are generated with an http request. When I get the answer and I set the options tag with *ngFor the first result appears as selected in the form, however looking at the ngModel they have no value selected

html

<select class="form-control" [(ngModel)]="filter.account">
  <option *ngFor="let account of accounts">{{account.name}}</option>
</select>

ts

ngOnInit() {
    this.filter = new AccountsCallLogFilter();
    this._acs.accounts().subscribe(
      val => {
        this.accounts = val;
        // this.filter.account = this.accounts[0].name; // <-- that works
      }
    );
  }

this.filter is a class of this type

export class AccountsCallLogFilter {
    public "account": string
    public "dateFrom": string
    public "dateTo": string
}  

response example

[{ "accountId": "123456", "name": "Account1", "count": 2990 },
 { "accountId": "654321", "name": "Account2", "count": 5789 }]

I would like that when receiving the answer the ngModel will be updated without having to do something like

this._acs.accounts().subscribe(
      val => {
        this.accounts = val;
        this.filter.account = this.accounts[0].name;
  }
);

when i change manually the option, value updates correctly, the problem is only at load

Answer 1

You have not provided value for options so select has no clue how to bind it. Try this:

<select class="form-control" [(ngModel)]="filter.account">
  <option *ngFor="let account of accounts" [value]="account.accountId">{{account.name}}</option>
</select>