Angular 4 – Reactive Forms – 从列表中未引用的对象中选择列

发布时间：2020-12-17 07:52:57 所属栏目：安全来源：网络整理

导读：我正在将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

我正在将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之间的区别.
也许我错过了什么……

谢谢你的帮助.

我不认为你需要trackBy,除非你想使用它.但它与您的默认选项无效的原因无关.

为什么它与level.id一起使用是因为这是一个字符串(数字？)而level是一个没有引用数组的对象,因此无法从列表中识别它.

由于您使用的是Angular 4,我们现在有了一个新的指令[compareWith],我们可以在这里比较您级别的某些属性,例如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不会尝试与空值进行比较.这会引发错误.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!