В настоящее время я пишу приложение Ionic 2 и создал следующий пользовательский компонент:
import {Component, EventEmitter} from 'angular2/core';
import {Button, Icon, Item} from 'ionic-angular';
import {DatePicker} from 'ionic-native';
import {HSDatePipe} from '../pipes/custom-dateformat.pipe';
@Component({
selector: 'date-picker',
directives: [Button, Icon, Item],
inputs: ['date', 'dateFormat', 'mode'],
outputs: ['onUpdate'],
pipes: [HSDatePipe],
template: `<button clear (click)="selectDate()">
{{date | hsDate:dateFormat}}
</button>`
})
export class HSDatePicker {
date:any;
dateFormat:any;
label:string;
mode:string;
onUpdate:any = new EventEmitter();
constructor() {
}
selectDate() {
let self:any = this;
let previousDate:any = self.date;
DatePicker.show({
date: new Date(self.date),
mode: self.mode
})
.then(
(date:any) => {
if (!date) {
date = previousDate;
}
self.onUpdate.emit(date);
},
err => {
console.log('error -', err);
}
);
}
}
На странице, вызывающей этот компонент, я включаю его на страницу следующим образом:
<date-picker item-right [date]="period.dateEnd" [dateFormat]="'HH:mm'" [mode]="'time'" (onUpdate)="dateChange($event, 'dateEnd')"></date-picker>
Функция dateChange
выглядит так:
dateChange(e, selector) {
let newDate = moment(e);
this.transactionFilter[selector] = newDate;
}
Когда я использую компонент для выбора новой даты, функция вызывается, как я и ожидал, и объект transactionFilter обновляется. Однако представление не обновляется и по-прежнему отображает старую дату на странице, пока я не нажму кнопку или не сфокусирую ввод и т. д.
Я думаю, что проблема связана с плагином или обещаниями DatePicker, потому что, если я изменю функцию selectDate()
таким образом, она будет нормально обновляться.
selectDate() {
let self:any = this;
self.onUpdate.emit(new Date());
}
Есть ли способ заставить представление обновляться или я должен сделать это как-то по-другому?
Спасибо за любую помощь.
Редактировать: Шаблон для главной страницы
@Page({
template: `
<ion-content>
<ion-toolbar primary class="subheader">
<ion-title>Transaction Viewer Filter</ion-title>
</ion-toolbar>
<ion-list>
<ion-item>
<ion-icon name="calendar" item-left></ion-icon>
From
<date-picker item-right [date]="transactionFilter.fromDate" [dateFormat]="'DD/MM/YYYY HH:mm'" [mode]="'datetime'" (onUpdate)="dateChange($event, 'fromDate')"></date-picker>
</ion-item>
<ion-item>
<ion-icon name="calendar" item-left></ion-icon>
To
<date-picker item-right [date]="transactionFilter.toDate" [dateFormat]="'DD/MM/YYYY HH:mm'" [mode]="'datetime'" (onUpdate)="dateChange($event, 'toDate')"></date-picker>
</ion-item>
<ion-item>
Count: {{count}}
</ion-item>
</ion-list>
<ion-row>
<ion-col>
<button class="close-modal" (click)="close()" danger block>Close</button>
</ion-col>
<ion-col>
<button class="save-modal" (click)="save()" favorite block>Save</button>
</ion-col>
</ion-row>
</ion-content>`,
directives: [HSDatePicker]
})
ionic -v
отображает 2.0.0-beta.25 - person Daniel Hutton   schedule 06.05.2016ionic info
, чтобы получить подробную информацию об этом проекте. Я думаю, чтоionic -v
- это версия CLI - person Will.Harris   schedule 06.05.2016