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并将纯文本保留为＆＃39; Angular＆＃39;方式是什么？

Answer 1

我想没有直接从字符串中删除HTML标记的方法，你可以使用Pipe，写一个＆＃34; Pipe＆＃34;像这样：

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

然后添加＆＃34; StripHtmlPipe＆＃34;在您的模块＆＃34;声明＆＃34;之后，您可以在HTML中使用此管道：

{{1}}

请注意，上述代码未经过全面测试。

Answer 2

我不建议使用正则表达式来解析html所建议的 kite.js.org。改用浏览器textContent / innerText函数：

htmlToText(html: string) {
    const tmp = document.createElement('DIV');
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
}

这应该更可靠。如果愿意，您仍然可以使用管道，只是不要使用正则表达式来解析html！

在Angular模板绑定中剥离html

2 个答案: