首页 文章

对整个块使用异步管道和observable

提问于
浏览 次
1

我有一个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>
angular typescript

2 回答

  • 3

    您可以创建这样的别名：

    <div *ngIf="(obj$ | async) as obj">
  <h2>{{ obj?.title }}</h2>
  <p>{{ obj?.prop.prop2 }}</p>
  <p>{{ obj?.another.prop }}</p>
</div>
    回复于
  • 3

    使用'as'语法 .

    另请注意，每个异步管道都会创建一个新订阅，如果您订阅使用http，则表示多个http调用 . 如果要在模板中使用异步管道多次使用相同的observable，请使用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)
      }
    }
    回复于

相关问题