时间戳

首页 > 解决方案 > 动态复选框的Angular 4触发事件

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

问题描述

我创建了一个 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()'，但结果一样。提前致谢。

标签： javascriptangularfor-loop

解决方案

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 是组件中的公共字段，模板就可以访问它。

推荐阅读