迭代前默认选择 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>

但以上方法均无效。

欢迎任何帮助

如果您使用 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: ''
}

Edit

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

public book: any = {
   pageLayout: 1
}

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