如何将管道异步化添加到不在html模板中的观察对象的Angular

我有这个Angular 代码:

<mat-table [dataSource]="myData">

<ng-container matColumnDef="abc">
   <mat-header-cell *matHeaderCellDef>Abc</mat-header-cell>
   <mat-cell *matCellDef="let myData" [style.color]="getColor(myData.myVal)">{{ myData?.myVal }}</mat-cell>
</ng-container>

</mat-table>

.ts

  @Input() myData: MyData[] = [];

  standardColor:string = '';
  warningColor:string = '';

  constructor(
    ...
  ) {   
    this.getSettings();
  }
  
  
  getSettings(){
   this.settings$ = this.settingsService.getSettings()
      .pipe(shareReplay(),
        catchError(error => {
          this.onError();
          return of({} as setting);
        })
      );

      this.settings$.subscribe(result => { 
        this.standardColor = result.standardColor;
        this.warningColor = result.warningColor;
      });
  } 
  
  
  getColor(myVal: number){
    if(myVal > 0){
      return this.standardColor;
    } else {
      return this.warningColor;
    } 

  }

当在mat-cell中执行getColor时，它返回空字符串.

相反，它应该返回来自可观察对象的值(第this.standardColor = result.standardColor;行).

这是因为this.sets$Observable是异步的，并且在html模板之后执行.

了解这一点通常通过将管道异步(|Asynch)添加到模板来解决.

但在本例中，它是一个不同的可观察对象(设置$)，而不是模板绑定中的数据源(Mydata).