离子 2 模态。内联模板 - 类型错误：无法读取未定义的属性“项目”

Question

我想从我的活动页面显示一个模式：

//event.html
<form [formGroup]="newEventForm">

      <ion-item>
        <ion-label floating>Title</ion-label>
        <ion-input formControlName="title" type="text"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Sport</ion-label>
        <ion-select formControlName="sport">
          <ion-option value="Running">Running</ion-option>
          <ion-option value="Football">Football</ion-option>
          <ion-option value="Yoga">Yoga</ion-option>
          <ion-option value="Golf">Golf</ion-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Début</ion-label>
        <ion-datetime displayFormat="DD MMM YYYY" formControlName="timeStarts"></ion-datetime>
      </ion-item>

      <ion-item>
        <ion-label>Où</ion-label>
        <ion-input formControlName="location" type="text" (click)="presentNewLocationModal()"></ion-input>
      </ion-item>

我实现了一个事件类如下：

//event.ts    
constructor(public modalCtrl: ModalController, public formBuilder: FormBuilder) {
        // Creating the newEventForm and specifying controls
        this.newEventForm = this.formBuilder.group({
          title: ['', Validators.required],
          sport: ['', Validators.required],
          timeStarts: ['', Validators.required],
          location: ['', Validators.required]
        });
      }

      presentNewLocationModal() {
        let modal = this.modalCtrl.create(NewLocationModal);
        modal.present();
      }

然后写了我的模态。 查看：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Choisir un lieu
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android, windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  Choisir un lieu
</ion-content>

类：

import { Component } from '@angular/core';
import { Platform, NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'modal-new-location',
  templateUrl: 'new-location-modal.html'
})
export class NewLocationModal {

  constructor(public platform: Platform, public viewCtrl: ViewController) {
    console.log('NewLocationModal#constructor');
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }
}

单击呈现模态的“où”输入时出现以下错误：

EXCEPTION: Error in ./NewLocationModal class NewLocationModal - inline template:22:14 caused by: Cannot read property 'items' of undefined

TypeError: Cannot read property 'items' of undefined
    at CompiledTemplate.proxyViewClass.View_NewLocationModal0.detectChangesInternal (/AppModule/NewLocationModal/component.ngfactory.js:363:46)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:117531:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:117726:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8100/build/main.js:117516:18)
    at CompiledTemplate.proxyViewClass.View_NewLocationModal_Host0.detectChangesInternal (/AppModule/NewLocationModal/host.ngfactory.js:29:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:117531:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:117726:44)
    at ViewContainer.detectChangesInNestedViews (http://localhost:8100/build/main.js:117863:37)
    at CompiledTemplate.proxyViewClass.View_ModalCmp0.detectChangesInternal (/IonicModule/ModalCmp/component.ngfactory.js:46:14)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:117531:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:117726:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8100/build/main.js:117516:18)
    at CompiledTemplate.proxyViewClass.View_ModalCmp_Host0.detectChangesInternal (/IonicModule/ModalCmp/host.ngfactory.js:30:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:117531:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:117726:44)

构造函数被调用，但不知何故，代码的一部分试图访问我自己不使用的“项目”变量......有什么想法吗？

顺便说一句，当我使用 templateUrl 时，我不明白为什么说它是“内联模板”..

**** 编辑 **** 仅当我将 templateUrl 用于模态时，似乎才会发生该错误。如果我使用“模板”在 .ts 文件中实现视图，则不会出现错误

Answer 1

正如here 所述，问题似乎是由于与 Ionic 相关的错误。升级到最新版本即可解决。