在我的组件中,有以下可观察项:
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
。
我该怎么做?