將存儲的包含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