2016-12-26 1 views
0

저는 오른쪽 하단에 버튼이있는 이온 2 프로젝트를 만들고 있습니다. 내 개념은 버튼을 클릭 할 때 시간 선택 도구가 열리는 것입니다. 내 시간을 선택하고 완료를 클릭했습니다.Ionic-2 : 정의되지 않은 'open'속성을 읽을 수 없습니다.

이 내가 시도한 방법은 다음과 같습니다 여기

HTML: 
    <ion-header> 
    <ion-navbar color="primary"> 
     <ion-title>Alarms</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 

    <ion-card *ngFor="let alarms of serAlarm"> 
     <ion-card-header> 
      {{alarms.id}} 
      <ion-toggle value="foo" checked="true"></ion-toggle> 
     </ion-card-header> 
     <ion-card-content> 
      <ion-checkbox (click)="clickRepeat()"></ion-checkbox> Repeat 
      <div class="hide"> 

      </div> 
     </ion-card-content> 
     <ion-card-content class="top0"> 
      {{alarms.hour}}:{{alarms.minute}} 
     </ion-card-content> 
    </ion-card> 


    <ion-datetime #dateTime displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="dateTimeModel" (ionChange)="onTimeChange()"></ion-datetime> 
    <ion-fab right bottom> 
     <button ion-fab color="primary" (click)="opentime()"> 
      <ion-icon name="add"></ion-icon> 
     </button> 
    </ion-fab> 

</ion-content> 

TS: 
import { Component, ViewChild } from '@angular/core'; 
import { NavController} from 'ionic-angular'; 


@Component({ 
    selector: 'page-alarm', 
    templateUrl: 'alarm.html' 
}) 
export class AlarmPage { 
    time: string = '00:00'; 
    serAlarm = []; 

    constructor(public navCtrl: NavController) { } 

    @ViewChild('dateTime') sTime; 

    opentime(){ 
     this.sTime.open(); 
    } 

    onTimeChange() { 
     var res = this.time.toString().split(":"); 
     this.serAlarm.push({ 
      id: "0", 
      description: "", 
      hour: res[0], 
      minute: res[1], 
      repeat: "0", 
      action: "0", 
      active: "1" 
     }); 
    } 
} 

이 모든 것이 잘 작동합니다. 그러나 + 버튼을 클릭하면 오류 Cannot read the property 'open' of undefined가 표시됩니다. 나는 문제가 <ion-datetime> 라인에있는 것 같아요. 그러나 나는 틀린 것을 파악할 수 없다. 누군가 그것을 도와 줄 수 있습니까? 무엇을 바꾸어야합니까? 나는 ngModel들은 이후 변경 한 것을

<ion-datetime #dateTime displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="dateTimeModel" (ionChange)="onTimeChange()"></ion-datetime> 

참고 : 당신이 다음의 요소를 변경 dateTime을 수있게하려면, 올바른 선택을 제공하는 데 필요한 요소를 선택하기 위해 enter image description here

+0

와 요소의 보류를 얻을 수 있나요? 이렇게 : echonax

+0

@echonax :이 오류가 나타납니다. Unhandled Promise 거부 : 참조 또는 변수에 할당 할 수 없습니다! ; Zone : ; 작업 : Promise.then; 값 : 오류 : 참조 나 변수에 할당 할 수 없습니다! ' – SSS

+0

오, 제 생각에는'ngModel '과 이름이 같기 때문입니다. 이것을 다음과 같이 시도해 볼 수 있습니까? ' – echonax

답변

1

같은 이름을 가졌어.

지금 당신은 당신이 당신의 이온 날짜 요소에`#의 dateTime`를 추가하려고 할 수 @ViewChild('dateTime') sTime;

관련 문제