如何串联从Angular中的异步管道返回的值

问题描述

我无法理解该怎么做.

最初，我在下面的方法中使用此订阅方法使用了一种方法(用于获取评论)，当评论返回到组件时，它们被连接到任何现有评论中，我已经使用异步管道重新实现了它，所以现在我我只是将评论设置为reviews $，而不是像以前那样将它们串联起来，这不是我想要的.

Initially I had a method (that fetched reviews) with this subscribe method below and when the reviews came back to the component they were concatenated to any existing reviews, I've re implemented it with an async pipe, so now I'm just setting the reviews to reviews$, not concatenating them like before, which isn't what I want.

// 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;
    });
}

这是我修改后的方法来获取评论，但不知道如何像以前一样将结果连接起来.我该怎么办?

Here's my modified method to fetch the reviews, but don't know how to concatenate the results like I was doing before. How would I do it?

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

FYI - I've also noticed that this getReviews() gets triggered multiple times now. I'm not sure if that is from the pipe or tap method.

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

推荐答案

我将解决以下问题，

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

• Define a subject to store the reviews. I am using BehaviourSubject to set initial value of reviews as an empty array []

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

• 接下来，定义触发评论的触发器. getReviews()函数将通过调用 Subject
上的 next()函数简单地触发可观察对象.
• Next define a trigger for getting the reviews. The getReviews() function will simply trigger the observable by calling the next() function on the Subject

  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 管道
• Finally, we subscribe to combinedReviews$ I will use async pipe

在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])
    )
  );
}

• 如前所述，将不会取消订阅.查看有效示例

这篇关于如何串联从Angular中的异步管道返回的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！