如何连接从 Angular 中的异步管道返回的值

Question

我无法理解该怎么做。

最初我有一个方法（获取评论），使用下面的订阅方法，当评论返回到组件时，它们被连接到任何现有评论，我用异步管道重新实现了它，所以现在我'我只是将评论设置为reviews$，而不是像以前那样连接它们，这不是我想要的。

// initial method
reviews: IReview[] = [];
getReviews() {
  this.membersService.getReviews(this.member.id, this.skip)
    .subscribe(response => {
      this.reviews = [...this.reviews, ...response];
      this.skip = this.skip + 10;
    });
}

这是我修改后的获取评论的方法，但不知道如何像以前那样连接结果。我该怎么做？

仅供参考 - 我还注意到这个 getReviews() 现在被多次触发。我不确定这是来自管道还是水龙头方法。

reviews$: Observable <IReview[]> ;
getReviews() {
    this.reviews$ = this.membersService.getReviews(this.member.id, this.skip)
    .pipe(
      tap(response => {
        this.skip = this.skip + 10;
      })
    );

Answer 1

我会像下面这样处理问题，

• 定义一个主题来存储评论。我正在使用BehaviourSubject 将评论的初始值设置为空数组[]

reviewsSubject$ = BehaviourSubject<IReview[]>([]);
reviews$ = this.reviewsSubject$.asObservable();

• 接下来定义获取评论的触发器。 getReviews() 函数将简单地通过在 Subject 上调用 next() 函数来触发 observable

  triggerSubject$ = new BehaviorSubject(null);
  trigger$ = this.triggerSubject$.asObservable();
  getReviews = () => this.triggerSubject$.next(null);

• 接下来将结合触发器和可观察对象来获取评论。我将使用来自rxjs 的combineLatest

  newReviews$ = this.membersService.getReviews(this.member.id, this.skip);
  combinedReviews$ = combineLatest([this.newReviews$, this.trigger$]).pipe(
    tap(() => (this.skip = this.skip + 10)),
    tap(([newReviews]) =>
      this.reviewsSubject$.next([...this.reviewsSubject$.value, ...newReviews])
    )
  );

• 最后我们订阅combinedReviews$我会用async管道

在 HTML 中

<button (click)='getReviews()'>Get More Reviews</button>
<ul *ngIf="combinedReviews$ | async">
    <li *ngFor="let review of reviews$ | async">{{ review.name }}</li>
</ul>

总体而言，代码将是

export class AppComponent {
  constructor(private membersService: MembersService) {}
  skip = 0;
  member = { id: 1 };
  reviewsSubject$ = new BehaviorSubject<IReview[]>([]);
  reviews$ = this.reviewsSubject$.asObservable();
  triggerSubject$ = new BehaviorSubject(null);
  trigger$ = this.triggerSubject$.asObservable();
  getReviews = () => this.triggerSubject$.next(null);
  newReviews$ = this.membersService.getReviews(this.member.id, this.skip);
  combinedReviews$ = combineLatest([this.newReviews$, this.trigger$]).pipe(
    tap(() => (this.skip = this.skip + 10)),
    tap(([newReviews]) =>
      this.reviewsSubject$.next([...this.reviewsSubject$.value, ...newReviews])
    )
  );
}

• 如上所述，不会取消订阅。 See a working Example