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>

我想在悬停时显示这些样式数据 问题是 Title ([attr.title] or Title, or [title]) 没有显示 div 的样式，浏览器建议我访问这个链接http://g.co/ng/security#xss

我将 Pipe 与 DomSanitizer 一起使用：

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

这就是我获取数据的方式：

1) 我得到 JSON

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

2) 使其在网页上可见

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

3) Html，我想在悬停时显示样式“标题”

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

[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>