angular 2 bypassSecurity

Question

私はデータを持つJSONファイルを持っています。各オブジェクトには私はこのようなフィールドにHTMLタグ、スタイル、およびテキストとの「説明」を持っている：

<div>__localname__</div> 
<div style="color: #555; margin-top:2px; margin-left:10px;"><div style="display:inline; color:#d34319 ">[DV]</div> Проверка домена (выдача от 5 минут)</div> 
<div style="color: #555; margin-top:2px; margin-left:10px;">Защищает домен с www и без www (указывайте при заказе домен с www, например www.domain.ru)</div> 
<div style="color: #555; margin-top:2px; margin-left:10px;">Гарантия 10000$</div> 

は私がホバー 問題でこのスタイルのデータを表示したいというタイトル（[attrのです。これは私がデータを取得する方法である

@Pipe({ name: 'safeHtml'}) 
export class SafeHtmlPipe implements PipeTransform { 
    constructor(private sanitized: DomSanitizer) {} 
    transform(value: any) { 
    return this.sanitized.bypassSecurityTrustHtml(value); 
    } 
} 

：div要素のスタイルとブラウザが表示されないタイトル]または[タイトル]、または[タイトル]）DomSanitizerと私はパイプを使用しています。このリンクhttp://g.co/ng/security#xss

を訪問する私を推奨しています：

01私はJSON

getPriceList() { 
    return this.httpGet('./ssl.json'); 
    } 

2）

ngOnInit() { 
    this.appService.getPriceList().subscribe(data => { 
     this.pricelist = data.pricelist; 
    }); 
    } 

3 Webページ上のそれが見えるように取得

1））私はホバー

<tbody> 
     <tr *ngFor="let item of pricelist"> 
     <td> 
      <a data-toggle="tooltip" data-html="true" 
      title="{{item.description|safeHtml}}"> 
       {{ item.name }} 
      </a> 
     </td> 
     <td> от {{ item.price.period[0].cost }} {{ item.price.currency }}</td> 
     <td> <div [innerHTML]='item.description | safeHtml'></div> </td> 
     </tr> 
    </tbody> 

にスタイルの "タイトル" を表示したいHTML、

[innerHTML]は問題なく動作しますが、タイトルは... JSONファイルからデータを操作するにはどうすればいいですか？ここで

はエラーとスクリーンショットです： https://yadi.sk/i/uieFFCfa3BMq4v

Answer 1

あなたのコンポーネントにこのPipeを追加します。

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); 
    } 
} 

ループ内のエレメントにPipeを使用できます。 例：

<div *ngFor="let price of pricelist"> 
    {{ price.description | safeHtml }} 
</div>