NativeScript - TimePicker 无法获取用户修改的值答案

【问题标题】：NativeScript - TimePicker Cannot get user modified valueNativeScript - TimePicker 无法获取用户修改的值
【发布时间】：2016-09-26 15:15:04
【问题描述】：

我无法获取 TimePicker 的用户修改值。我得到的只是我在控件中设置的原始值。

这是我的组件模板：

<TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000" style="height:90%">
    <StackLayout *tabItem="{title: 'Time'}">
        <TimePicker #timePicker [(ngModel)]='model.time'></TimePicker>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Date'}">
        <DatePicker #datePicker [(ngModel)]='model.date'></DatePicker>
    </StackLayout>
</TabView>
<button text="Done" (tap)="onDoneTap()"></button>

还有我的组件代码：

export class DateTimePickerComponent 
{
    public mDate: Date;
    public tabSelectedIndex: number;
    public model: any;

    constructor() 
    {
        this.mDate = new Date();
        this.model = {
            date: new Date(2014, 5, 13, 2, 24),
            time: new Date(2014, 5, 13, 2, 24)
        };
    }

    private onDoneTap()
    {
        this.mDate.setMinutes(this.model.time.getMinutes());
        this.mDate.setHours(this.model.time.getHours());

        this.mDate.setDate(this.model.date.getDate());
        this.mDate.setMonth(this.model.date.getMonth());
        this.mDate.setFullYear(this.model.date.getFullYear());  

        console.log(this.mDate);   
    }
}

为了构建它，我使用了Docs：

DatePicker - 日期属性
TimePicker - 时间属性

在此示例中，DatePicker 完美运行，它在 2014-05-13 初始化，当我更改它时，我会在控制台中获得修改后的值。那么我在 TimePicker 上做错了吗？

注意：我还尝试使用 ID 读取小时和分钟属性，但没有成功。始终相同的初始值 (2:24)

@ViewChild("timePicker") timePicker: ElementRef;
let datePickerView = <TimePicker>this.timePicker.nativeElement;
console.log(datePickerView.hour);  //  2
console.log(datePickerView.minute) // 24

【问题讨论】：

标签： angularjs typescript nativescript angular2-nativescript

【解决方案1】：

当您在main.ts 文件中未在imports 中添加NativeScriptFormsModule 时，可能会导致此问题。您可以查看下面给出的示例：

import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

@NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule, NativeScriptFormsModule],
})
class AppComponentModule {}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

我希望这会有所帮助。

更新：您可以将TimePicker 值作为onDoneTap 方法的参数返回。您可以查看随附的示例。

app.component.html

<StackLayout  exampleTitle toggleNavButton>
<!-- >> creating-timepicker-html -->
<timePicker class="example-container" #timePicker  verticalAlignment="center"></timePicker>
<!-- << creating-timepicker-html -->
<Button text="view" (tap)="ontap(timePicker.time)"></Button>

</StackLayout>

app.component.ts

export class AppComponent {
    public ontap(args:Date){
        console.log(args);
    }
}

【讨论】：

好主意，但不，我的导入中确实有“NativeScriptFormsModule”
您是否尝试在您的main.ts 文件中添加NativeScriptFormsModule 以验证这是否能解决您的问题。
我用你的更新建议更新了我的项目，我在 args 中得到“未定义”...
我发现问题在于Button 在TabView 之外，并且无法找到内部组件的id。为了能够获取 timePicker 值，您应该将 Button 移动到 TabView 项目中，因为您可以将它移动到 StackLayout 中。
你说得对，按钮不够近，现在我在控制台中得到了时间输出。不幸的是，它仍然显示 2:24，而不是我在 TimePicker 中选择的内容

【解决方案2】：

对于任何可能跌倒在这里的人：

在 Github 上针对此问题打开了一个错误。 [see here]。

【讨论】：