0

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

2 回答 2

0

当您错过添加文件时，可能会导致此NativeScriptFormsModule问题。您可以查看下面给出的示例：importsmain.ts

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);
    }
}
于 2016-09-27T13:14:54.437 回答
0

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

在 Github 上针对此问题打开了一个错误。[见这里]。

于 2016-10-21T13:28:56.367 回答