Angular 5 - 在 Typescript 中格式化文本？

Question

我正在尝试从我的 Typescript 文件中添加标记。这是我正在尝试的：

textString = `<b>This</b> should be bold`;
parser = new DOMParser();
parsedHTML = this.parser.parseFromString(this.textString, 'text/html');

我在 HTML 边用 {{parsedHTML}} 吐出来，但我得到的只是 [object HTMLDocument].

如何在 *ngFor 循环中显示格式化字符串？

打字稿

textString = `<b>This</b> should be bold`;

  planBundle = [
    'One month (.99)',
    `One year (.90 - 20% Discount)`,
    this.textString
  ];

HTML

<div>
  <mat-radio-group layout="vertical" [(ngModel)]="selectedPlan">
    <mat-radio-button *ngFor="let plan of planBundle" [value]="plan" style="display: block; margin-top: 8px;">
      {{plan}}
    </mat-radio-button>
  </mat-radio-group>
</div>

当前输出

你能在其中添加内联 CSS 吗？它似乎没有出现。这是我正在尝试的：

打字稿

 planYearTextString = `One year payment <s>(.88)</s> <b>.90</b> <span style="color: green;">(Save 20%)</span>`;

  planBundle = [
    'One month (.99)',
    this.planYearTextString
  ];

输出

Answer 1

根据 David 的评论，将格式化文本导入模板的解决方案是：

<div [innerHtml]="textString"></div>

Answer 2

同理，需要使用innerHtml

<div>
  <mat-radio-group layout="vertical" [(ngModel)]="selectedPlan">
    <mat-radio-button *ngFor="let plan of planBundle" [value]="plan" 
style="display: block; margin-top: 8px;">
     <span [innerHtml]="plan"></span>
    </mat-radio-button>
  </mat-radio-group>
</div>

Angular 5 - 在 Typescript 中格式化文本？

Angular 5 - Format text in Typescript?

markup

typescript

angular