Вызовите ChangeDetectorRef.markForCheck () после того, как канал asyn c подписался

Question

В моем компоненте есть следующее Наблюдаемое:

responseObservable$: Observable<IListingResponse>;

Я подписываюсь на него, используя Angular's async pip, как указано ниже:

<ng-container *ngIf="(responseObservable$ | async) as results; else noContent">
<table class="table table-sm table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Transfer Key</th>
      <th>Primary Account</th>
      <th>Type</th>
      <th>Secondary Account</th>
      <th>Date</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of results.Data">
      <td>{{item.Id}}</td>
      <td>{{item.TransferKey}}</td>
      <td>{{item.PrimaryAccountName}}</td>
      <td>{{getTransferType(item.TransferTypeId)}} <span *ngIf="item.TransferMeta.IsReversed" class="fa-red">(Reversed)</span></td>
      <td>{{item.PartnerAccountName}}</td>
      <td>{{item.TransferDate | date:'d MMM y h:mm:ss a'}}</td>
      <td><span [innerHtml]="item.TransferMeta | transferStatusTransformation"></span></td>
    </tr>
  </tbody>
</table>
<div class="float-left">
  Showing {{ startNumber }} to {{ toNumber(results.TotalRecords) }} of
  {{ results.TotalRecords }}
</div>
<ngb-pagination class="d-flex justify-content-end" [collectionSize]="results.TotalRecords" [(page)]="pageNumber"
  [pageSize]="pageLength" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"
  (pageChange)="dataTablePageEventChanged($event)"></ngb-pagination>
<div class="clearfix"></div>

Нет переводов

Как вы можете видеть выше, я также устанавливаю значение Status столбцов innerHtml для заданного значка c Font-Awesome, используя custom pipe, называется transferStatusTransformation.

Вот сокращенная версия моей трубы:

    @Pipe({
  name: 'transferStatusTransformation'
})
export class TransferStatusTransformationPipe implements PipeTransform {

  private mappedTransferStatus: Map<string, string> = new Map<string, string>();

  constructor(private domSanitizer: DomSanitizer) {

  }

  transform(value: TransferMetaViewModel): any {
    return this.domSanitizer.bypassSecurityTrustHtml(this.buildStatusHtml(value));
  }

  private buildStatusHtml(value: TransferMetaViewModel): string {
    let htmlConcatenatedString = '';

    if (value.HasCorrection) {
      //Has correction
      // htmlConcatenatedString += "<i class='fa fa-clipboard fa-orange' title='Has correction'></i>";
      htmlConcatenatedString += "<fa-icon icon='clipboard' class='fa-orange' title='Has correction'></fa-icon>";
    }

    if (value.IsReversed) {
      //reversed
      htmlConcatenatedString += "<fa-icon icon='backward' class='fa-red' title='Reversed'></fa-icon>"
    }

    return htmlConcatenatedString;
  }
}

Моя проблема в том, что когда я устанавливаю innerHtml с помощью трубы, значки делают не оказывать на вид. Я считаю, что это как-то связано с кодом, работающим за пределами соответствующей зоны angular, и, следовательно, значки не отображаются.

Я хотел бы знать, когда подписка на Async pipe была подписана, так что Я могу, например, позвонить ChangeDetectorRef.markForCheck().

Как бы я совершил sh это?