Angular (4/5/6/7/8) 在订阅代码中重构订阅

Question

您好，我想简化以下代码。在以下情况下很难应用 switchMap，因为我正在为第二个订阅方法使用 forEach 循环。什么是更好的编码方法？感谢您的帮助！

activities: Activity[];
notifications: any[] = [];

 this.profileService
  .listProfileActivities(this.authService.profileId)
  .subscribe({
    next: activities => {
      this.activities = activities.filter(
        activity =>
          activity.type === 'favorite' &&
          activity.to === this.authService.profileId
      );

      this.activities.forEach(activity => { // forEach loop is here
        const notification = {
          profile: null,
          profileId: '',
          imageId: '',
          name: '',
          timeago: new Date(),
        };
        this.profileService
          .readProfile(activity.from) // 2nd subscribe method dependent on forEach loop variable
          .subscribe(profile => { 
            notification.profile = profile;
            notification.profileId = profile.id;
            notification.imageId = profile.imageID;
            notification.name = profile.name;
            notification.timeago = new Date(activity.at);
          });
        this.notifications.push(notification);
      });
    },
  });

Answer 1

更好的方法可能是利用 pipable 运算符，并将 array 扁平化为 mergeAll。

this.profileService
  .listProfileActivities(this.authService.profileId)
  .pipe(
    mergeAll(),
    filter(activity =>
        activity.type === 'favorite' &&
        activity.to === this.authService.profileId
    ),
    mergeMap(activity => 
        this.profileService.readProfile(activity.from)
                           .pipe(map(profile => ({ profile, activity })))
    ),
    map(result => ({
        profile: result.profile,
        profileId: result.profile.id,
        imageId: result.profile.imageID,
        name: result.profile.name,
        timeago: new Date(result.activity.at)
    }))
  ).subscribe({
    next: notification => this.notifications.push(notification)
  });

Angular (4/5/6/7/8) 在订阅代码中重构订阅

Angular (4/5/6/7/8) Refactor subscribe within subscribe code

subscribe

angular

angular7

angular8