Angular: Как динамически выбрать первый элемент выбранного компонента

Question

Я пытаюсь отобразить первый элемент выбора в поле выбора, настроив таргетинг на индекс selected = "index == 0", как показано ниже, но это не удается.Как мне это сделать?

<div class="col-md-12 col-lg-4">
    <select class="pull-right border-outset3 p-a-pt5 w-15" [(ngModel)]="sortValue"
      (change)="sortProducts()">
      <optgroup label="Sort By:">
        <option *ngFor="let menu of sortMenu$ | async; let ndx=index"
          value="{{menu.value}}" selected="ndx==0">
          {{menu.label}}
        </option>
      </optgroup>
    </select>
  </div>

Answer 1

Вы можете определить модифицированную версию Observable (например, sortMenuDefault), в которой значение первого элемента присваивается sortValue с помощью оператора do:

this.sortMenuDefault = this.sortMenu$.do(items => {
  if (!this.sortValue && items && items.length > 0) {
    this.sortValue = items[0].value;
  }
});

ииспользуйте этот Observable в шаблоне:

<select [(ngModel)]="sortValue" ...>
  <option *ngFor="let menu of sortMenuDefault | async" [value]="menu.value">
    {{menu.label}}
  </option>
</select>

См. этот стек для демонстрации.