Question

我的流定义如下

export class MyComponent implements OnInit {
  things$: Observable<Thing[]>;

  constructor(private fooService: FooService) {
  }

  ngOnInit() {
    this.things$ = this.fooService.getFoos() // Observable<Foo[]>
                      .pipe(
                        mergeAll(),
                        map(foo => this.thingService.getThing(foo.thingId)), // Observable<Thing>
                        zipAll()
                      );

  }
}

我想要实现的是

将我的Foo[]与Foo分成单个mergeAll的序列
使用Thing为每个Foo获取一个map
使用Thing将我所有的Thing[]合并到zipAll

现在这是我的模板

<div *ngIf="(things$ | async) as things; else loading">
  <ng-container *ngIf="things.length">
    <div *ngFor="let thing of things">
      {{ thing.someAttr }}
    </div>
  </ng-container>
</div>

<div #loading>LOADING</div>

正如标题所述，我处于加载状态，异步管道永远无法解析。我在做什么错了？

Answer 1

方法可能会有所不同。由于Observable本身包含一个数组，因此您需要在map函数中处理它。在这种情况下，不需要mergeAll和zipAll。

this.things$ = this.fooService.getFoos() // Observable<Foo[]>
    .pipe(
        map(foos => {
            let temp = [];
            foos.forEach(function(foo) {
                temp.push(this.thingService.getThing(foo.thingId));
            });
            return temp;
        });

RxJS Observable永远不会完成（角度）

1 个答案: