Как установить пустое значение и значение по умолчанию для элемента select при использовании asyn c pipe в Angular

Question

Я пытаюсь использовать asyn c pipe в моем приложении Angular, и это в моем файле Typescript:

this.mySupplierList$ = this._mySupplierService.getSupplierList();

и файле HTML:

<select>
  <option *ngFor="let supplier of supplierList$ | async" [ngValue]="supplier">{{supplier.Name}}</option>
</select>

У меня два вопроса:

1. Как установить значение по умолчанию для выбора для первого или последнего поставщика в mySupplierList?

2. Как я могу добавить пустой элемент поставщика в качестве первого элемента выбора?

Answer 1

1. Используйте ngModel, чтобы установить значение по умолчанию.
2. Добавить тег без значения для пустого элемента поставщика.

<select  [(ngModel)]="yourModel">
  <option>Empty</option>
  <option *ngFor="let supplier of supplierList$ | async" [ngValue]="supplier">{{supplier.Name}}</option>
</select>

Вот пример на стеке.