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

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

由于您使用的是单独的对象 (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>

现在您从表单中获取的值对象包含此值。

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

DEMO

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

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