在Angular模板绑定中剥离html


Strip html in Angular template binding

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

1
2
3
4
5
  <li *ngFor="let result of results">
    <span [innerHTML]="result.question.title">
    </span>
 
</li>

使用innerHTML的问题是HTML会被解析和呈现，所以像

标记这样的东西会增加页边距并破坏列表的对齐。

我想去掉所有HTML标记，只输出纯文本。

这样的方法：

1
2
3
4
5
6
  <li *ngFor="let result of results">
    <span>
        {{result.question.title}}
    </span>
 
</li>

号

不删除HTML，它只是将HTML输出为纯文本。

我如何才能去掉HTML并以"角度"方式保留纯文本？

相关讨论

我想没有直接的方法从字符串中去掉HTML标记，你可以使用pipe，写一个"pipe"，如下所示：

1
2
3
4
5
6
7
8
9
10
11
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"添加到模块"declarations"中，完成这些步骤后，您可以在HTML中使用此管道：

1
2
3
4
5
6
<li *ngFor="let result of results">
    <span>
        {{result.question.title | striphtml}}
    </span>
 
</li>

号

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

相关讨论