Angular2：帶異步管道的日期管道

Question

我設置此代碼是為了打印出訂閱供稿日期字段：

<div class="col-xs-8">
  <span class="text-light fs-mini m">
    {{((user$ | async).validation) | date: 'dd/MM/yyyy'}}
  </span>
</div>

Angular告訴我：

錯誤錯誤：未捕獲（承諾）：TypeError：co.user未定義

我必須說，當我添加date管道時就會出現問題。 (user$|async).valitation無需格式化(user$|async).valitation正常工作。

Answer 1

((user$ | async).validation)解析為undefined ，然后傳遞給日期管道。

我建議您通過在組件中進行subscription來解決問題，然后：

 <div class="col-xs-8">
  <span class="text-light fs-mini m">
    {{ user.validation | date: 'dd/MM/yyyy' }}
  </span>
</div>

或類似的東西：

 <div class="col-xs-8">
  <span *ngIf="user$ | async" class="text-light fs-mini m">
    {{ user$.validation | async | date: 'dd/MM/yyyy' }}
  </span>
</div>

或創建一個接受日期作為參數的自定義日期管道 。

Answer 2

從Angular 6開始（我認為），您也可以在異步上使用as語法。

 <div class="col-xs-8">
  <span *ngIf="user$ | async as user" class="text-light fs-mini m">
    {{ user.validation | date: 'dd/MM/yyyy' }}
  </span>
</div>

值得閱讀NgIf和Async Pipe處理可觀察對象