Question

我正在通过WebAPI从数据库中获取数组中的数据。问题是我的文本显示像json，我不想显示HTML标签，我只想显示文本“ Lorem Ipsum”。请根据我的代码提供一些解决方案。谢谢

HTML Lorem Ipsum

TS {{result.CaseSummary}}

Answer 1

在Angular应用程序中使用外部HTML的正确方法是使用DomSanitizer。

步骤1：创建管道

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

/**
 * Generated class for the SafeHtmlPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

}

步骤2：将{{result.CaseSummary}}更改为

<div [innerHTML]="result?.CaseSummary | safeHtml"></div>

Answer 2

我不认为有直接的方法可以从字符串中剥离HTML标记，您可以使用Pipe制作“管道”：

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

@Pipe({
  name: 'stripHtmlTags'
})

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

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

<p>{{result.CaseSummary  | stripHtmlTags}}</p>

隐藏从DataBase Angular 6呈现的数据中的HTML标签

2 个答案: