1

問題のサンプル: http://plnkr.co/edit/7FeRoyyqDnjXpV9Q9Vpy?p=preview

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{myDate}}</h2> <!-- THIS UPDATES AS EXPECTED -->
      <h2>{{myDate | date: 'longDate'}}</h2> <!-- THIS DOES NOT -->
      <a (click)="prevMonth()" href="javascript:;">Previous Month</a>
      <a (click)="nextMonth()" href="javascript:;">Next Month</a>
    </div>
  `,
})
export class App {
  myDate: Date;
  constructor() {
    this.myDate = new Date();
  }

  nextMonth() {
    this.myDate.setMonth(this.myDate.getMonth() + 1);
  }

  prevMonth() {
    this.myDate.setMonth(this.myDate.getMonth() - 1);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

パイプを使用せずに変数を渡すと、期待どおりに更新されます。しかし、同じ変数の DatePipe 形式のコピーは更新されません。パイプはオブザーバブルのみを更新しますか? または、これを標準の Date タイプで使用して、リアルタイムで更新することを期待できますか?

DatePipe API には、これが予想される動作であることを示唆するものは何もありませんが、DatePipe だけがこのように動作に影響を与える可能性があるところまで絞り込みました。 https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

4

3 に答える 3

1

リンクされたオブジェクトが更新された後ではなく、オブジェクトのリンクが更新された後に、パイプが更新をトリガーするようです。

以下のようにthis.myDateを再割り当てすることで修正できます。

this.myDate = new Date(this.myDate.setMonth(this.myDate.getMonth() + 1));

于 2016-11-10T22:16:58.537 に答える