Question

我有一个带有选择输入字段的表单，该字段基于对象：

<!--
this.options = [
  { name: 'Option A', id: 1 },
  { name: 'Option B', id: 2 },
  { name: 'Option C', id: 3 },
];
-->

<form #optionForm="ngForm">
  <select [(ngModel)]="model.option" name="option">
    <option *ngFor="let option of options" [ngValue]="option">
      {{option.name}}
    </option>
  </select>
</form>

最初，我的模型设置为以下选项之一，例如：

this.model = { option: { name: 'Option B', id: 2 } };

如何在我的选择输入中预选这个对象？应该选择整个model.option对象。

Plunker，其中包含src/app.ts中的示例组件。

Answer 1

我在https://plnkr.co/edit/YTMZ05Awd1AGDpds6QSO?p=preview进行了更改。

<select [(ngModel)]="model.option.id" name="option">
        <option *ngFor="let option of options" [ngValue]="option.id">
          {{option.name}}
        </option>
</select>

基本上，您将对象存储在ngValue而不是属性中（在您的情况下为id / name）。希望这是有道理的。

在select-input中预选对象

1 个答案: