2017-12-18 20 views
1

我有一個存儲Firebase數據的Angular項目。數據以字符串形式存儲在數據庫中(prdName: string;)。我想問一下,如果我在像<b>this is text</b>這樣的字符串中加入了一個html標記並將其存儲,然後將它們綁定/查看爲html文本格式,是否有可能? (文字成爲粗體)將存儲的包含html標籤的字符串轉換爲html文本格式

firebase

//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}}

請讓我知道,如果需要更多的片段。非常感謝你提前。

回答

1

我在我的項目,使使用這種管道將其工作的權利

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

相關問題