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