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

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

由于您使用的是单独的对象（record.priority），因此无法自动绑定为预先选择的值，您必须以某种方式创建引用。因此，在构建表单时，您可以执行此操作：

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变为异步，则可以设置布尔标志，以便在设置值之前不显示表单。或者，您最初可以构建一个空表单，然后使用setValue()进行表单控件。

<强> DEMO

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

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

Answer 2

试试这个：

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

[ngValue]="priority.id"和[(ngModel)]="record.priority.id"应指向相同的值，它会自动生效，

无需撰写[selected]="priority.id == record.priority.id"

在角度为2的条件上添加属性

2 个答案: