将存储的包含html标签的字符串转换为html文本格式

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个存储Firebase数据的Angular项目。数据以字符串形式存储在数据库中（prdName: string;）。我想问一下，如果我在像<b>this is text</b>这样的字符串中加入了一个html标记并将其存储，然后将它们绑定/查看为html文本格式，是否有可能？ （文字成为粗体）将存储的包含html标签的字符串转换为html文本格式

//service.ts  
getData() {  
    this.List = this.firebase.list('Product');  
    return this.List;  
}  
insertProduct(Product: Product) {  
    this.productList.push({  
    prdName: Product.prdName,  
    prdCategory: Product.prdCategory,  
    prdSup: Product.prdSup,  
    prdImage: Product.prdImage,  
    prdDescription: Product.prdDescription  
    });  
}

//component.ts  
ngOnInit() {  
    var x = this.ListService.getData();  
    x.snapshotChanges().subscribe(item => {  
    this.List = [];  
    item.forEach(element => {  
     var y = element.payload.toJSON();  
     y["$prdKey"] = element.key;  
     this.List.push(y as List);  
    });  
    });  
}

<!--component.html-->  
<label>Product Name: </label> {{ListService.selectedProduct.prdName}}

请让我知道，如果需要更多的片段。非常感谢你提前。

回答：

你必须使用innerHTML绑定HTML标签：

<div [innerHTML]="ListService.selectedProduct.prdName"></div>

检查：https://angular.io/guide/template-syntax#!#property-binding-or-interpolation-

回答：

我在我的项目，使使用这种管道将其工作的权利

import { PipeTransform, Pipe } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser' 
@Pipe({ name: 'safeHtml'}) 
export class SafeHtmlPipe implements PipeTransform { 
    constructor(private sanitized: DomSanitizer) {} 
    transform(value) { 
    return this.sanitized.bypassSecurityTrustHtml(value); 
    } 
}

然后在你想要你的html的地方你只需做

<div [innerHTML]="someHtmlContent | safeHtml"></div>
需要

管，使信任这个网站的内容，更多有关这一点：

https://angular.io/guide/security#bypass-security-apis

以上是 将存储的包含html标签的字符串转换为html文本格式 的全部内容， 来源链接： utcz.com/qa/262162.html

回到顶部