Angular 4 - Reactive Forms - 从列表中未引用的对象中选择列表中的项目 - trackby 问题？

Question

我正在将 Angular 1.6 代码转换为 Angular 4，但我对元素列表有疑问。Angular 1.6 中的代码是:

<select ng-model="$ctrl.level" ng-options="item as item.label for item in $ctrl.referentiel.levels | orderBy : 'index' track by item.id"                                   id="childLevel" name="childLevel" class="size-xl"                               >
<option value="">Select</option>
</select>

我的列表中未引用对象级别，因为此列表是使用对象 referentiel.levels 加载的。但是我的列表元素和我的对象 Level 之间的匹配是通过 trackby 完成的。因此，当加载我的对象 Level 时，该元素会在列表中被选中。

现在，我尝试使用 Reactive Forms 转换这段代码。在我的 HTML 代码中，我有:

<select formControlName="levelControl" id="levelSelect" name="levelSelect" class="size-xl">
<option [ngValue]="null">Select</option>
<option *ngFor="let level of referentiel.levels;trackBy:identify" [ngValue]="level">{{level.label }}</option>
</select>

在我的组件中，我在 OnInit 方法中有:

(<FormControl>this.myForm.controls.levelControl).setValue(this.level);

识别方法很简单:

identify(index,item){
   return item.id;
}

但举止不同。当我使用我的对象 Level 设置我的控件的值时，列表中具有相同 id 的项目未被选中。

我找到了一个解决方案，但我不明白为什么它不起作用。我的解决方法是用 HTML 编写这段代码:

<option *ngFor="let level of referentiel.levels;trackBy:identify" [ngValue]="level.id">{{level.label }}</option>

在我的 typescript 文件中:

(<FormControl>this.myForm.controls.levelControl).setValue(this.level.id);

所以，现在它正在工作:我的项目在列表中被选中。

在这种情况下，我不明白 Angular 的两个版本之间的区别。也许我错过了什么......

感谢您的帮助。

Answer 1

我看不出您需要此处的 trackBy ，除非您想使用它。但这与您的默认选项不起作用的原因无关。

为什么它与 level.id 一起工作是因为这是一个字符串(数字？)而 level 是一个没有引用您的数组的对象，因此它不能从名单中被认可。

由于您使用的是 Angular 4，我们现在有一个新指令 [compareWith]，我们可以在其中比较您的 level 中的一些属性，例如 id 。将其与数组进行比较并找到匹配项。因此，您可以执行以下操作:

<select formControlName="levelControl" [compareWith]="compare" 
  id="levelSelect" name="levelSelect" class="size-xl">
    <option value="">Select</option>
    <option *ngFor="let level of referentiel.levels" [ngValue]="level">
      {{level.label }}
    </option>
</select>

组件:

compare(val1, val2) {
  return val1.id === val2.id;
}

另请注意我改变了

<option [ngValue]="null">Select</option>

到

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

这样 Angular 就不会尝试与 null 值进行比较。那会引发错误。