需要帮助来重构 Angular 中的异步管道

Question

我需要一些帮助来重构我对异步管道的方法和服务调用。

这是我的组件和服务中的内容

///// component ///// 
bands: Iband[];

getbands() {
    this.membersService.getbandsForMember(this.member.id).subscribe(response => {
        this.bands = response;
    }, error => {
      console.log(error);
    });
}
  
///// service ///// 
  
getbandsForMember(id: number) {
   return this.http.get<Iband[]>(this.baseUrl + 'members/' + id + '/memberbands');
}

这是我遇到的一些麻烦。 除了服务，我觉得我说得对，不知道怎么修改。

///// component /////
bands$: Observable<Iband[]> ;

getbands() {
  this.membersService.getbandsForMember(this.member.id).subscribe(response => {
      this.bands$ = response;
    }, error => {
      console.log(error);
    });
}


///// service ///// 
getbandsForMember(id: number) {
  return this.http.get<Iband[]>(this.baseUrl + 'members/' + id + '/memberbands').pipe(
    map((bands: Iband[]) => {
      return bands;
    })
  );
}

Answer 1

1. RxJS map 运算符用于转换 observable 发出的值。如果您不转换响应，则不需要。

2. Angular async 管道应该与可观察对象一起使用。您将类型定义为bands$: Observable<Iband[]> 是正确的。但不需要订阅。 async 管道将订阅 observable。

服务

getbandsForMember(id: number): Observable<Iband[]> {
  return this.http.get<Iband[]>(this.baseUrl + 'members/' + id + '/memberbands');
}

组件

bands$: Observable<Iband[]> ;

getbands() {
  this.band$ = this.membersService.getbandsForMember(this.member.id);
}

模板

<ng-container *ngIf="(bands$ | async) as bands">
  <!-- use `bands` emission from the observable -->
  {{ bands | json }}
</ng-container>

更新：在组件中设置成员变量

当在模板中触发async 管道时，您可以在组件中使用tap 或map 运算符来执行一些副作用。如果传入不需要转换，则使用tap，否则使用map。

控制器

bands$: Observable<Iband[]> ;

getbands() {
  this.band$ = this.membersService.getbandsForMember(this.member.id).pipe(
    tap(response => {
      console.log('got bands in component:', response);
      this.skip = true; // <-- set some variable
      // set some other variables and call some functions
    })
  );
}

模板

<ng-container *ngIf="(bands$ | async) as bands">
  <!-- use `bands` emission from the observable -->
  {{ bands | json }}
</ng-container>