在具有双向绑定的情况下默认Angular2

发布时间：2020-12-17 08:00:51 所属栏目：安全来源：网络整理

导读：我想设置一个 select使用默认选项使用HTML，并填充 select的其余部分用双向绑定到我的模型。 HTML： select class="form-control" required [(ngModel)]="model.product" ngControl="product" option value=""Select a product/option option *ngFor="#produ

我想设置一个< select>使用默认<选项>使用HTML，并填充< select>的其余部分用双向绑定到我的模型。

HTML：

<select class="form-control" required
        [(ngModel)]="model.product"
        ngControl="product">
    <option value="">Select a product</option>
    <option *ngFor="#product of products" [value]="product">{{product}}</option>
</select>

模型：

products: string[] = [
    'Foo','Bar'
];

现在发生的事情是我的选择是绑定到模型，它是：

model: Entry = new Entry();

因此，product属性中没有默认值，因此< select>什么都没有。我的意思是，这是按预期工作的。

我正在试图弄清楚如何在< select>中显示默认值虽然如此，我想在我的模型中没有对UI值进行硬编码并在我的模型的新实例中进行默认操作时这样做。 Angular 2有办法解决这个问题吗？

编辑：

结果HTML应如下所示：

<select>
  <option value>Select a product</option>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
</select>

我不认为Angular有办法解决这个问题。你必须做一些工作：

<select class="form-control" required [(ngModel)]="model.product">
  <option *ngFor="#product of [defaultStr].concat(products)" 
   [value]="product === defaultStr ? null : product">
     {{product}}
  </option>
</select>

defaultStr = 'Select a product';
model = { product: null };
products: string[] = [
  'Foo','Bar'
];

Plunker

由于您使用NgModel绑定选定的值，因此必须将bound属性设置为最初的默认值，即null，否则默认情况下不会选择该选项：

model = { product: null };

使用null，我注意到HTML是

<option value="null">Select a product</option>

所以，您可能更喜欢使用空字符串”而不是null：

[value]="product === defaultStr ? '' : product"

model = { product: '' };

那么HTML就是

<option value="">Select a product</option>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!