我有一个 Observable,它从 API 返回一个大对象。我需要在我的模板中显示这些值。
对于作为数组返回的其他数据,我可以使用:
<div *ngFor="let value of values | async">
<p>{{ value.prop }}</p>
</div>
我不需要等待异步在 *ngFor
中完成,因为它已经在父元素中有一个异步管道。
对于我的对象,我正在寻找类似的东西。目前,我正在做类似的事情:
<h2>{{ (obj | async)?.title }}</h2>
<p>{{ (obj | async)?.prop.prop2 }}</p>
<p>{{ (obj | async)?.another.prop }}</p>
这显然留下了很多重复的代码。有这样的东西吗?
<div *using="obj | async">
<!-- obj has resolved, can access obj.prop -->
</div>
最佳答案
使用“as”语法。
另请注意,每个异步管道都会创建一个新订阅,如果您的订阅使用 http - 这意味着多个 http 调用。如果您想在带有异步管道的模板中多次使用相同的可观察对象,请使用 Rx share()。
@Component({
selector: 'my-app',
template: `
<div>
<div *ngIf="obj$ | async as obj; else empty">
{{obj.x}}
{{obj.y}}
</div>
<ng-template #empty>Empty. Wait 5 s...</ng-template>
</div>
`,
})
export class App {
s = new Subject();
obj$;
constructor() {
this.obj$ = this.s.asObservable();
setTimeout(() => {
this.s.next({x:12, y:100});
}, 5000)
}
}
关于angular - 对整个 block 使用异步管道和可观察对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43766352/