大佬教程收集整理的这篇文章主要介绍了Angular 4 – Reactive Forms – 从列表中未引用的对象中选择列表中的项目 – trackby问题?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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>
(<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之间的区别.
也许我错过了什么……
谢谢你的帮助.
为什么它与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不会尝试与空值进行比较.这会引发错误.
以上是大佬教程为你收集整理的Angular 4 – Reactive Forms – 从列表中未引用的对象中选择列表中的项目 – trackby问题?全部内容,希望文章能够帮你解决Angular 4 – Reactive Forms – 从列表中未引用的对象中选择列表中的项目 – trackby问题?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。