html - 在 Angular 为 2 的条件上添加属性

Question

我有一个从数组填充的简单下拉列表。 用户将以可以从上述下拉列表中选择记录优先级的形式编辑记录。我在设置该下拉列表中的选定项目时遇到困难。 这是我的下拉列表代码:

<select *ngIf="formModel" [(ngModel)]="record.priority" formControlName="priority">
    <option value="-1">Select priority</option>
    <option *ngFor="let priority of formModel.priorities"
        [ngValue]="priority"
        [innerHtml]="priority.name"
        [selected]="priority.id == record.priority.id"></option>
</select>

但是，记录的所选优先级未被选择，生成的 HTML 显示 selected="true"。 当我将代码更改为以下内容时:

[selected]="(priority.id == record.priority.id ? '' : null)"

结果是selected=""，但该选项仍未被选中。 我已经确认应该选择该特定选项。 此外，当我将 Firebug 中的 HTML 更改为仅 selected 时，该选项也会被选中。 所以我的问题是:如何在特定条件下添加属性，以便该属性不会添加到具有空值的其他元素？

Answer 1

不鼓励在 react 形式中使用双向绑定(bind)。重点是改用表单控件。如果您使用双向绑定(bind)，为什么要使用响应式(Reactive)形式？这意味着模型驱动的形式是完全多余的。因此，如果您想使用模型驱动形式解决这个问题，我建议如下:

由于您使用的是单独的对象 (record.priority)，因此它无法自动绑定(bind)为预选值，因此您必须以某种方式创建引用。因此，在构建表单时，您可以这样做:

this.myForm = this.fb.group({
  priority: [this.formModel.priorities.find(x => x.id == this.record.priority.id)]
});

模板看起来像这样:

<form [formGroup]="myForm">
  <select *ngIf="formModel" formControlName="priority">
    <option value="-1">Select priority</option>
    <option *ngFor="let priority of formModel.priorities"
      [ngValue]="priority"
      [innerHtml]="priority.name"></option>
  </select>
</form>

现在，您从表单获取的值对象保存了该值。

如果记录是异步进行的，您可以设置一个 bool 标志，以便在设置值之前不显示表单。或者，您可以首先构建一个空表单，然后对表单控件使用 setValue()。

<强> DEMO

编辑:仔细观察，如果 record.priority 没有值，您希望有条件设置 null 吗？这也可以在表单控件中很好地完成:

priority: [this.record.priority ? this.formModel.priorities.find(x => x.id == this.record.priority.id) : null]