Question

我非常喜欢*ngFor指令的语法。您可以迭代数组的所有元素。

我想用管道的结果实现同样的目的。例如async管道。当我在模板中放置async管道时，我使用了一个可观察结果的属性，我有很多订阅，我的模板混杂着像{{(someObservable$ | async)?.propertyName}}这样的东西。有没有办法简单地将管道的当前结果绑定到这样的模板输入变量？

<div let="currentValue = someObservable$ | async">
  {{currentValue?.foo}}, {{currentValue?.bar}}
  ...
</div>

我与*ngIf一起尝试了这个，但这似乎不是一个有效的模板表达式：

<div *ngIf="let currentValue = someObservable$ | async">
  {{currentValue?.foo}}, {{currentValue?.bar}}
  ...
</div>

Answer 1

是的！从角4 +：

<div *ngIf="userObservable | async; else loading; let user">
  Hello {{user.last}}, {{user.first}}!
</div>
<template #loading>Waiting...</template>

Source

Answer 2

有一个未解决的问题需要支持https://github.com/angular/angular/issues/2451

目前，可以分配给模板变量的内容非常有限。

对添加它的标记的元素或组件的引用
exportAs，例如<form #f="ngForm">

let i=index

ngFor

作为解决方法，您可以在组件类的方法中执行表达式，并在视图可以绑定到的属性中使结果可用。

无论如何都不鼓励模板中的逻辑过多。

有没有办法将管道的结果保存在Angular 2中的模板输入变量中？

2 个答案: