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

Question

我有一个存储Firebase数据的Angular项目。数据以字符串形式存储在数据库中（prdName: string;）。我想问一下，如果我在像<b>this is text</b>这样的字符串中加入了一个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}}

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

Answer 1

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

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

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

Answer 2

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

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