AngularFontAwesome не будет отображаться в таблице с введенной Html через трубу - PullRequest
Новая
       73

AngularFontAwesome не будет отображаться в таблице с введенной Html через трубу

0 голосов
/ 29 января 2020

У меня есть следующая Труба: 

@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.IsDevianceTracked && !value.IsDevianceVariance) {
      //deviance linked. No Variance. Green link
      htmlConcatenatedString += "<fa name='link'></fa>";
    }

    if (value.IsDevianceTracked && value.IsDevianceVariance && value.IsDevianceLinkBroken) {
      //deviance linked. Broken. Red broken link
      htmlConcatenatedString += "<fa name='unlink'></fa>";
    }

    if (value.IsCorrection) {
      //Is Correction transfer
      htmlConcatenatedString += "<fa name='clipboard-list'></fa>";
    }

    if (value.HasCorrection) {
      //Has correction
      htmlConcatenatedString += "<fa name='clipboard-list'></fa>";
    }

    if (value.IsReversed) {
      //reversed
      htmlConcatenatedString += "<fa name='backward'></fa>";
    }

    return htmlConcatenatedString;
  }
}

Я использую Pipe следующим образом: 

<table class="table table-sm table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>#</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.PrimaryAccountName}}</td>
        <td>{{getTransferType(item.TransferTypeId)}}</td>
        <td>{{item.PartnerAccountName}}</td>
        <td>{{item.TransferDate}}</td>
        <td><span [innerHtml]="item.TransferMeta | transferStatusTransformation"></span></td>
      </tr>
    </tbody>
  </table>

Когда я проверяю элемент в Chrome, я вижу Добавлен тег <fa></fa>, как показано ниже:

inspectedImage

Я использую значки FontAwesome в других местах приложения, и они отображают хорошо. Так что проблема не в том, что FontAwesomeModule не импортируется.

Здесь - это Stackblitz.

Почему FontAwesome не рендерится?

...