动态复选框的Angular 4触发事件

Question

我创建了一个 div 元素和动态复选框以及更改功能。但是在单击复选框时，不会调用该函数

我的代码

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

在单击复选框时未调用 ChangeFn。我也尝试过(click)='ChangeFn()'，但结果相同。提前致谢。

Answer 1

Angular 模板是在构建过程中编译的。当您通过 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>`
})

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