代码之家 › 专栏 › 技术社区 › koque

角度:如何动态选择所选组件的第一项

twitter-bootstrap angular

0

koque · 技术社区 · 8 年前

我试图通过将索引作为目标来显示选择框的第一个选择项,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>

1 回复 | 直到 8 年前

1

ConnorsFan 8 年前

您可以定义可观察的修改版本(例如 sortMenuDefault ,其中第一个项的值分配给 sortValue 与 do 操作员:

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

并在模板中使用可观察到的:

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

见 this stackblitz 用于演示。