0

让我简化一下具体问题：

html 看起来像：

<div [innerHtml]="htmlToAdd"></div>

我有一个数组

 TrueFalseOptions = [
        {key: 'true' , value: 'true'},
        {key: 'false' , value: 'false'}
    ];

我在我的 ts 文件中设置 div 的 innerhtml 如下：

this.htmltoAdd = "<label>Required</label><select class='form-control'> <option *ngFor='let c of {{TrueFalseOptions}}' [ngValue]='{{c.value}}'>c.key</option></select>";

如果我不使用管道 - 我从上述声明中看不到任何内容。如果我使用如下所述的管道：

@Pipe({name: 'safeHtml'})
export class Safe {
    constructor(private sanitizer:DomSanitizer){}

    transform(style) {
         return this.sanitizer.bypassSecurityTrustHtml(style);
    }
}

然后我可以看到选择下拉菜单，但绑定仍然丢失。

这可能是什么问题？

4

1 回答 1

0

这种方法有一些核心问题：

  1. 您不能使用 innerHTML 并期望绑定会起作用（这只是意味着角度语法不起作用。（没有组件，指令将被初始化）
  2. 您永远不应该像在该组件中那样直接触摸 DOM（您应该尝试忘记document.getElementById直接操作 DOM 的类似功能

要回答您的问题：您实际需要做的是将类中的 html 放入模板中，并将其包装在<div *ngIf="ele.Required"/>. 只要Required 属性为真，就会显示这个div。

PS如果您曾经使用innerHTML在其间添加静态内容，您可以直接绑定它，如：<div [innerHTML]="theStringVariable"></div>

于 2017-04-06T08:33:58.523 回答