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 ($4.99)',
    `One year ($47.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>($59.88)</s> <b>$47.90</b> <span style="color: green;">(Save 20%)</span>`;

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

产量

Answer 1

同样的原则，你需要使用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>

Answer 2

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

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