web-dev-qa-db-ja.com

パイプ 'DatePipe'の引数 'date format'が無効ですか？

これは簡単な質問のようです。 Ionic 2日付形式のアプリケーションでパイプを使用しています。これは、受け取ったWebサービスの応答です。

 [
  {
    "MessageID": 544882,
    "CategoryID": 1,
    "DateSent": "2015-05-18T02:30:56",
    "Title": "Jobseeker App",
    "MessageContent": "Hi Test guy just started to use the app..",
    "Sender": null,
    "Recipient": null,
    "DateReceived": null,
    "DateRead": "2015-05-18T02:30:56",
    "Note_Direction": "sent",
    "Viewed": 0,
    "AppointmentDateTime": null,
    "MessageAttachments": [

    ]
  },
  {
    "MessageID": 544886,
    "CategoryID": 1,
    "DateSent": "2015-05-18T02:42:45",
    "Title": "Jobseeker App",
    "MessageContent": "App",
    "Sender": null,
    "Recipient": null,
    "DateReceived": null,
    "DateRead": "2015-05-18T02:42:45",
    "Note_Direction": "sent",
    "Viewed": 0,
    "AppointmentDateTime": null,
    "MessageAttachments": [

    ]}
   ]

これは私が使用しているコードスニペットです。

<div class="Date">
<label class="time">{{appointment.DateSent | date:"HH"}}:{{appointment.DateSent| date:"mm"}}</label>
<label class="month">{{appointment.DateSent| date:"MMM"}}</label>
<label class="day">{{appointment.DateSent| date:"dd"}}</label>
<label class="year">{{appointment.DateSent| date:"yyyy"}}</label>
</div>

エラー：

Invalid argument '2015-05-18T02:30:56' for pipe 'DatePipe' in [{{appointment.DateSent | date:"HH"}}:{{appointment.DateSent| date:"mm"}} in AppointmentsPage@14:37]

次のような日付形式を取得する必要があります。

06:05
Dec
24
2015
angulardate-formationic2pipes-filters
9
happycoder

間違ったパラメータを渡しているため、angular throwing error。で日付コードを変更しました：

_birthday = 2015-05-18T02:30:56 //Working
birthday2 = new Date(2015-05-18T02:30:56) //Working

Oldbirthday = '2015-05-18T02:30:56'  //Not Working
_

ここでは、変数名の代わりに変数birthdayを使用しています。たぶんエラーの理由はangularは文字列として日付の形式を受け入れないかもしれません。

  • このパイプは純粋であるとマークされているため、入力が変更されたときに再評価されません。代わりに、ユーザーは日付を不変オブジェクトとして扱い、パイプを再実行する必要があるときに参照を変更する必要があります（これは、費用のかかる操作になる変更検出の実行ごとに日付を再フォーマットすることを避けるためです）。 https://angular.io/docs/ts/latest/api/common/DatePipe-class.html

working plnkr http://plnkr.co/edit/b9Z090rQpozMoMi0BWaY?p=preview

更新：

@Kanishkaの必要に応じて、はい、日付を更新し、HTML側からnew date()に変換することができます。そのためには、TypeScriptのsetterおよびgetter関数を呼び出す必要があります。ここにあなたが探しているものの例があります。したがって、これを使用すると、応答から独自の配列を作成する必要はないと思います。これがお役に立てば幸いであり、フロントエンドからの応答を再生する新しい方法を提案してください。

_<label>{{setDate('2015-05-18T02:30:56') | date:"yyyy"}}</label>

  get Anotherdate(){  //getter function
    return this.date
  }
  setDate(date) {
    this.Anotherdate = date;
    return this.Anotherdate;
  }
  set Anotherdate(date){     // Setter Function
    this.abc = new Date(date)
  }
_

更新された作業デモ http://plnkr.co/edit/rHCjevNcol12vwW6B38u?p=preview

7
Pardeep Jain