Angular2：带有异步管道的日期管道答案

【问题标题】：Angular2: date pipe with async pipeAngular2：带有异步管道的日期管道
【发布时间】：2017-04-18 11:42:48
【问题描述】：

我设置此代码是为了打印订阅源日期字段：

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

Angular 告诉我：

ERROR Error: Uncaught (in promise): TypeError: co.user is undefined

我不得不说，当我添加date 管道时，问题就出现了。 (user$|async).valitation 无需格式化即可正常工作。

【问题讨论】：

试试这个{{((user$ | async)?.validation) | date: 'dd/MM/yyyy'}}
一直失败...
您能否在组件中添加更多代码user$
@Jordi ((user$ | async)?.validation) 解析为 undefined 作为回报，它会传递到您的日期管道。

标签： angular

【解决方案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>

或者创建一个自定义的date pipe 接受可观察对象作为参数。

【讨论】：

【解决方案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>

这篇文章值得一读Handling Observables with NgIf and the Async Pipe

【讨论】：