Javascript 动态复选框的角度4触发事件

我已经创建了一个div元素和动态复选框以及change函数。但单击复选框时，不会调用该函数

我的代码

@Component({
    selector: 'Dropdown',
    template: `<div class="select">
        <div class="selectBox" (change)="Checkboxes()">
          <select multiple>
            <option id='Option' (click)='Click()'>Select an option</option>
          </select>
        </div>
        <div id="checkboxesdiv">
      </div></div>`
})

@组件({
选择器：“下拉列表”，
模板：`
选择一个选项
`
})

在ngOnInit中，我用动态值声明了字符串，并将其分配给模板的innerHtml

    let option = "";
    for(let item of DBdata){
    option += "<label for='" + item.id+ "' title='" + item.des+ "'><input class='Optioninputclass' (change)='ChangeFn()' type='checkbox' id = '" + item.id+ "'/>" + item.des+ "</label>"
    }

    var select = document.getElementById("checkboxesdiv");
    select.innerHTML = this.optionValue;

let option=”“；
for（让DBdata项）{
选项+=“”+项。des+“”
}
var select=document.getElementById（“checkboxesdiv”）；
select.innerHTML=this.optionValue；

---

单击复选框时不会调用更改fn。我也尝试了

（单击）='ChangeFn（）'

，但结果相同。提前感谢。

在构建过程中会编译角度模板。当您通过innerHTML动态设置内容时，您不能使用角度语法（也可以，但它只是被忽略）。您应该做的是使用*ngFor在模板中创建复选框

@Component({
    selector: 'Dropdown',
    template: `<div class="select">
        <div class="selectBox" (change)="Checkboxes()">
        <select multiple>
            <option id='Option' (click)='Click()'>Select an option</option>
        </select>
        </div>
        <div id="checkboxesdiv">
            <label [for]="item.id" [title]="item.des" *ngFor="let item of DBdata">
                <input class="Optioninputclass" (change)="ChangeFn()" type="checkbox" [id]="item.id"/>{{ item.des }} 
            </label>
        </div>
    </div>`
})

@组件({
选择器：“下拉列表”，
模板：`
选择一个选项
{{item.des}
`
})

---

只需确保DBdata是组件中的公共字段，以便模板可以访问它。

什么是

ChangeFn

？您的

复选框（）函数在哪里？您希望
（更改）
位做什么？DOM操作正是Angular不鼓励的事情。更重要的是，如果您必须使用DOM，例如jQuery，那么ngAfterViewInit就是事件。checkbox（）将为标签elementDBData分配样式显示块不需要是公共的，如果使用AOT编译，则私有变量/数组/对象不起作用。在这种情况下，您在模板中访问的所有内容都需要是公共的。如果您不希望其他类/组件读取该值，则它们只需要是公共的。private表示只有该组件和相应的html文件才能访问它。有些人对该主题有进一步的了解：你搞错了。请阅读我提供的链接。当您使用AOT构建时（当您在prod模式下构建时，angular会这样做），模板被编译成类，因此该字段需要是公共的，以便模板可以访问。