NativeScript

Question

我无法获取 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

Answer 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);

希望对您有所帮助。

更新：您可以 return 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);
    }
}

Answer 2

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

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

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

NativeScript - TimePicker Cannot get user modified value

angularjs

typescript

angular2-nativescript