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

あなたはhtmlタグをバインドするinnerHTMLプロパティを使用する必要があります。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); 
    } 
} 

、その後で：この

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

チェック単にあなたのhtmlをしたい場所

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

パイプは、これについての詳細な情報を信頼し、このHTMLコンテンツを作成するために必要とされる：

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