需要帮助重构 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

RxJS map 运算符用于转换 observable 发出的值。如果您不打算转换响应，则不需要。
Angular async 管道应该与可观察对象一起使用。您将类型定义为 bands$: Observable<Iband[]> 是正确的。但不需要订阅。 async 管道将订阅可观察对象。

服务

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>

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

您可以在组件中使用 tap 或 map 运算符在模板中触发 async 管道时执行一些 side-effects 操作。如果传入不需要转换，则使用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>

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

Need help to refactor to an async pipe in Angular

asynchronous

observable

typescript

angular

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