8

我正在将 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 完成的。因此，当我的对象级别加载时，该元素在列表中被选中。

现在，我尝试使用 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;
}

但说法不一样。当我使用我的对象级别设置控件的值时，未选择列表中具有相同 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 的两个版本之间的区别。也许我错过了什么……

谢谢你的帮助。

4

1 回答 1

32

我不认为你会需要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值进行比较。那会抛出一个错误。

于 2017-07-28T09:54:37.047 回答