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处理可观察对象