订阅异步管道后,调用ChangeDetectorRef.markForCheck()

时间:2020-04-29 09:21:57

标签: angular typescript angular8 angular2-changedetection

在我的组件中,有以下可观察项:

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列值Font-Awesome设置为特定的custom pipe图标。 1}}。

这是我烟斗的简化版本:

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何时订阅,以便例如致电Async pipe

我该怎么做?

0 个答案:

没有答案