时间戳

首页 > 解决方案 > Angular 将下拉选择选项设置为迭代前的默认选择

angular - Angular 将下拉选择选项设置为迭代前的默认选择

问题描述

我有一个选择下拉列表，我从列表中迭代选项。我正在尝试将一个单独的选项设置为已选择（作为默认值），以防用户未选择值。

这是我尝试实现的方法：

<select [(ngModel)]="book.pageLayout">
    <option [value]="0" [attr.selected]="book.defaultLayoutId === null">No Default Layout</option>
    <option *ngFor="let l of availableLayouts"
            [value]="l.id"
            [attr.selected]="book.pageLayout == l.id">
      {{l?.name}}
    </option>
  </select>

我也试过：

<option [value]="0" selected="selected">No Default Layout</option>

乃至：

<option [value]="0" selected="1==1">No Default Layout</option>

但以上都没有奏效。

欢迎任何帮助

标签： angulardrop-down-menuhtml-select

解决方案

如果您使用的是 ngModel，则选择的属性不会有太大帮助，那么您可以轻松地将默认值设置为定义的模型。

<select [(ngModel)]="book.pageLayout">
  <option value="">No Default Layout</option>
  <option *ngFor="let l of availableLayouts" [value]="l.id">
    {{l?.name}}
  </option>
</select>

然后在component.ts里面

public book: any = {
   pageLayout: ''
}

编辑

要设置默认选项，我们需要将 pageLayout 值设置为 id 而不是空字符串。

public book: any = {
   pageLayout: 1
}

public availableLayouts: any = [
  {
    name: "One",
    id: 1
  },
  {
    name: "Two",
    id: 2
  }
]

推荐阅读