Угловое событие запуска 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

Угловые шаблоны компилируются во время сборки. Когда вы устанавливаете содержимое динамически через 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 является открытым полем в вашем компоненте, чтобы шаблон мог получить к нему доступ.