javascript - Angular HTML 绑定(bind)不起作用

Question

我正在尝试迭代一个数组并创建一个工作正常的 DOM，但 pipe 无法工作。我关注了这个example但这在这里也行不通。

这是 json

[{
  "question":"What is this in QUestiom?",
  "ans":"<strong> this </strong> is only question"

},{
  "question":"What is the output of following code ?",
  "ans":"vgvfvfg"
},{
  "question":"What is the output of following code ?",
  "ans":"fcfcff"
}]

HTML

  <div *ngFor="let ques of questionseries;let i =index" class="test">
  <div>
    <span [innerHTML]="ques.question | safeHTML"> </span>
  </div>
  <div>{{ques.ans}}</div>
</div>

自定义管道

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";

@Pipe({
  name: 'safeHTML',
  pure:false
})
export class SafeHTMLPipe implements PipeTransform {
 constructor(private sanitizer:DomSanitizer){}
  transform(value: any, args?: any): any {
   console.log(value , args);
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
 }

这是工作 DEMO .我的期望是 this 将位于 strong 内部，但它只是正确渲染。

Answer 1

该行还需要绑定(bind)到innerHTML:

  <div>{{ques.ans}}</div>

如下:

  <div [innerHTML]="ques.ans | safeHtml"></div>