Javascript Ionic-2:无法读取未定义的属性“open”

我正在创建一个ionic-2项目，在右下角有一个按钮。我的想法是，当我点击按钮时，时间选择器应该打开。我必须选择我的时间并单击“完成”

我就是这样尝试的：

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"
        });
    }
}

在这里，一切正常。但是，当我单击+按钮时，我得到一个错误，即无法读取undefined的属性“open”。我想，问题是一致的。但是，我不知道怎么了。有人能帮我吗？我应该换什么？

---

为了选择元素，您需要提供正确的选择器，如果您希望它是dateTime，则将元素更改为：

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

请注意，我已经更改了ngModel，因为它们具有相同的名称引用

---

现在您可以使用@ViewChild'dateTime'时间获得元素

为了选择元素，您需要提供正确的选择器，如果您希望它是dateTime，则将元素更改为：

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

请注意，我已经更改了ngModel，因为它们具有相同的名称引用

---

现在您可以使用@ViewChild'dateTime'时间获得元素

能否尝试将dateTime添加到ion dateTime元素中？像这样：@echonax:I未经处理的承诺拒绝收到此错误：无法分配给引用或变量；区域：；任务：承诺；值：错误：无法分配给引用或变量！哦，我想是因为它和ngModel同名。你能这样试试吗：@echonax:谢谢，它奏效了。但是，有一个小问题，如果你看到上面编辑的图片，我选择的时间在创建的卡片下面，00:00在上面。为什么会这样？我怎样才能纠正它？只有我选择的时间应该存在。也就是说，它应该放在00:00的地方。我应该改变什么？嗯，我需要一些细节。。如何显示它们？通过哪个字段？可以尝试将dateTime添加到ion dateTime元素中吗？像这样：@echonax:I未经处理的承诺拒绝收到此错误：无法分配给引用或变量；区域：；任务：承诺；值：错误：无法分配给引用或变量！哦，我想是因为它和ngModel同名。你能这样试试吗：@echonax:谢谢，它奏效了。但是，有一个小问题，如果你看到上面编辑的图片，我选择的时间在创建的卡片下面，00:00在上面。为什么会这样？我怎样才能纠正它？只有我选择的时间应该存在。也就是说，它应该放在00:00的地方。我应该改变什么？嗯，我需要一些细节。。如何显示它们？在哪个领域？