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

Question

我转换角1.6代码角4和我有一个元素的列表的问题。 在角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被加载时，元素在列表中被选中。

现在，我尝试转换使用活性形式的代码。 在我的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> 

在我的打字稿文件：

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

所以，现在它正：我的项目在列表中选择。

我不明白的角度在这种情况下，两个版本之间的差异。 也许我错过了一些东西......

感谢您的帮助。

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的值。这会引发错误。