Angular7, директива Select не выбирает опцию, когда опции загружаются асинхронно

Question

У меня есть выбор, параметры которого создаются с помощью запроса http.Когда я получаю ответ и устанавливаю тег параметров с помощью * ng, первый результат отображается как выбранный в форме, однако, глядя на модель ngModel, у них не выбрано никакого значения

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 является классом этого типа

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

пример ответа

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

Я хотел бы, чтобы при получении ответа ngModelобновляться без необходимости делать что-то вроде

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

, когда я вручную изменяю опцию, значение корректно обновляется, проблема только при загрузке

Answer 1

Вы не указали значение для параметров, поэтому select не имеет ни малейшего понятия, как его связать.Попробуйте это:

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