Angular 4-反应形式-从列表中未引用的对象中选择列表中的项目-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加载的。 但是，由于trackby，我的列表元素和对象Level的匹配得以完成。 因此，当我的对象级别被加载时，该元素在列表中被选中。

现在，我尝试使用反应式表单转换此代码。 在我的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;
}

但是，举止却有所不同。 当我使用对象“级别”设置控件的值时，未选择列表中具有相同ID的项目。

我找到了解决方案，但我不明白为什么它不起作用。 我的解决方法是用HTML编写以下代码：

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

在我的打字稿文件中：

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

因此，现在可以正常工作：在列表中选择了我的项目。

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

谢谢你的帮助。

Answer 1

我看不到这里不需要trackBy ，除非您要使用它。 但这与为什么您的默认选项不起作用无关。

它与level.id一起使用的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值进行比较。 那会抛出一个错误。