如何解决ng-template无法读取复选框中未定义的属性“ selected”
在我的代码中,我面临问题。
我的HTML代码段是:
<form [formGroup]="personalForm">
<div style="background-color: gainsboro">
<div formArrayName="other"
*ngFor="let other of personalForm.get('other').controls; let i = index"
class="form-group">
<div [formGroup]="other">
<span for="filterName">{{other.controls.filterName.value}}</span>
<ng-select #ngSelect
formControlName="searchCreteria"
[items]="other.value.data"
[multiple]="true"
[virtualscroll]="true"
bindLabel="name"
[cloSEOnSelect]="false"
[clearSearchOnAdd]="true"
bindValue="name"
(paste)="onPaste($event,other,i)"
(clear)="removeCompletePanel(i)"
[selectOnTab]="true"
[(ngModel)]="selectedSearchCreteria[i]">
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input [ngModelOptions]="{standalone: true}" [ngModel]="item$.selected" id="item-{{index}}" type="checkBox" /> {{item.name | uppercase}}
</ng-template>
<!--<ng-template ng-option-tmp let-item="item" let-index="index">
<input style="visibility:visible;" [ngModelOptions]="{standalone: true}" (ngModelChange)=onChange() [(ngModel)]="item.selected" id="item-{{index}}" type="checkBox" /> {{item.name | uppercase}}
</ng-template>-->
</ng-select>
</div>
</div>
</div>
</div>
</form>
在ng-template上,出现以下错误,并且无法通过单击复选框标签来选择项目:
Cannot read property 'selected' of undefined
请建议我如何处理此错误。
更新:
从@Poul获得建议后,我成功升级了angular和ng-select。现在,我没有收到错误消息,但单击复选框标签时仍未选中复选框。
但是标记创建成功:
Package.json:
"dependencies": {
"@angular/common": "~7.1.0","@angular/compiler": "~7.1.0","@angular/core": "~7.1.0","@angular/forms": "~7.1.0","@angular/http": "~7.1.0","@angular/platform-browser": "~7.1.0","@angular/platform-browser-dynamic": "~7.1.0","@angular/router": "~7.1.0","@angular/upgrade": "~7.1.0","angular-in-memory-web-api": "^0.7.0","bootstrap": "3.3.7","core-js": "^2.5.4","reflect-Metadata": "0.1.10","es6-shim": "^0.35.1","fancybox": "3.0.0","jquery": "3.1.1","jquery-validation": "1.15.1","jquery-validation-unobtrusive": "3.2.6","natives": "^1.1.4","rxjs": "^6.6.0","rxjs-tslint": "0.1.5","rxjs-compat": "^6.6.0","systemjs": "0.19.40","zone.js": "~0.8.26","jszip": "^3.2.1","typings": "^1.3.2","wijmo": "5.20191.605","@ng-select/ng-select": "2.4.0","@ng-select/ng-option-highlight": "0.0.5"
},
解决方法
您正在使用ng-select和angular的(非常旧)版本。要解决您遇到的问题,您必须升级到新版本。至少使用角度6来解决该问题,因为item$
模板变量是在ng-select的v2.3.0中发布的。
但是,如果您需要最新的错误/安全修复程序和功能,则最好升级到最新版本。
,问题似乎出在那一行:
<input [ngModelOptions]="{standalone: true}" [ngModel]="item$.selected" id="item-{{index}}" type="checkbox" /> {{item.name | uppercase}}
Wich表示您的$item
未定义。检查您的变量是用好名字声明的,并且您了解如何使用let-item
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。