离子/角2组件事件发射器不更新视图

问题描述：

我目前正在写的离子2应用程序，创建了以下的自定义组件：离子/角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 –

在您的项目路线中键入'ionic info'来获取该项目的详细信息。我认为'离子-v'是CLI版本 –

答

我认为，这是因为Angular2检测基础上的引用，而不是价值的变化。如果检测到新的日期实例，则视图将被更新。如果它是相同的实例，但其内容已更新，则视图将不会更新。

我会重新建立一个新的日期如下：

DatePicker.show({ 
    date: new Date(self.date), 
    mode: self.mode 
}) 
.then(
    (date:any) => { 
    if (!date) { 
     date = previousDate; 
    } 
    self.onUpdate.emit(new Date(date.getTime())); 
    }, 
    err => { 
    console.log('error -', err); 
    } 
);

编辑

你可以尝试在一个区域执行的处理：

export class HSDatePicker { 

    date:any; 
    dateFormat:any; 
    label:string; 
    mode:string; 
    onUpdate:any = new EventEmitter(); 

    constructor(private ngZone:NgZone) { // <------- 
    } 

    selectDate() { 
     this.ngZone.run(() => { // <------ 
     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); 
      } 
     ); 
     }); 
    }

嗨，我试过你的解决方案，但视图仍然不更新不幸。 –

我认为你应该在一个区域内执行一些事情。我相应地更新了我的答案... –

同样的问题:(它更新'dateChange（）'内部的对象'罚款，只是视图不更新。我也尝试设置'this.transactionFilter [选择器]''新日期（）'并忽略了传入的参数，但它仍然是一样的东西。 –

答

我改变了selectDate()功能像这样，它现在起作用。感谢Thierry &这个职位ionic2-camera-demo指向我在正确的方向。

selectDate() { 

     let self:any = this; 
     let previousDate = self.date; 

     DatePicker.show({ 
      date: new Date(self.date), 
      mode: self.mode 
     }) 
     .then(
      (date:any) => { 
       if (!date) { 
        date = previousDate; 
       } 
       this.ngZone.run(() => { 
        self.onUpdate.emit(date); 
       }); 
      }, 
      err => { 
       console.log('error -', err); 
      } 
     ); 

    }

离子/角2组件事件发射器不更新视图

相关推荐