在Angular模板绑定中删除html-Java 学习之路

我有一个列表，显示有时可能包含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”方式？

1 回答

我想没有直接从字符串中删除HTML标签的方法，你可以使用Pipe，像这样写一个"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>

请注意，上面的代码未经过全面测试 .

回复于 2024-05-04T10:54:35+08:00

在Angular模板绑定中删除html

1 回答

相关问题