html - 在 Angular 模板绑定(bind)中剥离 html

Question

我有一个显示有时包含 HTML 的数据的列表

  <li *ngFor="let result of results">
    <span [innerHTML]="result.question.title">
    </span>
  </li>

使用innerHTML的问题是 HTML 被解析和呈现，所以像 <p> 这样的东西标签会增加边距并破坏列表的对齐方式。

我想去掉所有的 html 标签，只输出纯文本。

这样的方法:

  <li *ngFor="let result of results">
    <span>
        {{result.question.title}}
    </span>
  </li>

不会剥离 HTML，它只是将 HTML 输出为纯文本。

如何去除 HTML 并以“Angular”方式保留纯文本？

Answer 1

我想没有直接的方法可以从字符串中去除 HTML 标签，你可以使用 Pipe ，写一个这样的“管道”:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'striphtml'
})

export class StripHtmlPipe implements PipeTransform {
    transform(value: string): any {
        return value.replace(/<.*?>/g, ''); // replace tags
    }
}

然后将“StripHtmlPipe”添加到您的模块“声明”中，完成这些步骤后，您可以在 HTML 中使用此管道:

<li *ngFor="let result of results">
    <span>
        {{result.question.title | striphtml}}
    </span>
  </li>

请注意上面的代码没有经过全面测试。