Estoy usando Angular2 y Semantic UI y quiero crear un componente de selección múltiple con una casilla de verificación como esta https://jsfiddle.net/jp8xj0wk/2/ , pero cuando itero con *ngFor, la casilla de verificación no funciona, pero si Inserto elementos de casilla de verificación manualmente, solo estos funcionan bien.
import { Component, OnInit, Input } from '@angular/core'; declare var $: any; @Component({ selector: 'combo-multiple', template: ` <div class="ui basic right labeled dropdown icon button"> <i class="dropdown icon"></i> <span class="ui tiny header">Items</span> <div class="menu"> <div class="ui icon search input"> <i class="search icon"></i> <input type="text" name="search" placeholder="Search..."> </div> <div class="scrolling menu"> <!-- Checkbox inserted manually works fine --> <div class="ui checkbox item" data-value="item -1"> <input type="checkbox" name="item-1"> <label>item-1</label> </div> <div class="ui checkbox item" data-value="item 0"> <input type="checkbox" name="item0"> <label>item0</label> </div> <!-- End. Checkbox inserted manually works fine --> <!-- checkbox with ngFor doesn't work --> <div class="ui checkbox item" *ngFor="let item of items" [attr.data-value]="item"> <input type="checkbox" name="{{item}}"> <label>{{item}}</label> </div> </div> </div> ` }) export class ComboMultiple implements OnInit { items: string[]; constructor() {} ngOnInit() { this.items = ["Item 1","Item 2","Item 3"]; $('.ui.checkbox').checkbox(); $('.ui.dropdown').dropdown({action:'nothing'}); } }este es un buen caso de uso para los ganchos del ciclo de vida del componente, voy a agregar un botón a su componente para ilustrar la solución. Este nuevo botón agregará un nuevo elemento a la matriz, nada más.
aquí hay un plunker que funciona: https://plnkr.co/edit/K5MWKzfCFjGmeOzYYxIJ?p=preview
lo principal aquí es agregar la matriz en o antes de ngOnInit e inicializar la casilla de verificación y seleccionar en AfterViewChecked
de esta manera, cada vez que haya un cambio (como agregar un nuevo elemento a la matriz). Cuando Angular termina de representar la vista, llama a AfterViewChecked , donde iniciamos la selección y la casilla de verificación.
@Component({ selector: 'combo-multiple', template: ` <div class="ui basic right labeled dropdown icon button"> <i class="dropdown icon"></i> <span class="ui tiny header">Items</span> <div class="menu"> <div class="ui icon search input"> <i class="search icon"></i> <input type="text" name="search" placeholder="Search..."> </div> <div class="scrolling menu"> <!-- Checkbox inserted manually works fine --> <div class="ui checkbox item" data-value="item -1"> <input type="checkbox" name="item-1"> <label>item-1</label> </div> <div class="ui checkbox item" data-value="item 0"> <input type="checkbox" name="item0"> <label>item0</label> </div> <!-- End. Checkbox inserted manually works fine --> <!-- checkbox with ngFor doesn't work --> <div class="ui checkbox item" *ngFor="let item of items" [attr.data-value]="item"> <input type="checkbox" name="{{item}}"> <label>{{item}}</label> </div> </div> </div> </div> <!-- NEW BUTTON --> <button (click)="addItem()">add new</button> ` }) export class ComboMultiple implements OnInit, AfterViewInit, AfterViewChecked { items: string[]; constructor() {} ngOnInit(){ // add those three items on initialization of component. this.items = ["Item 1","Item 2","Item 3"]; } // when called, adds a new item to the array addItem(){ this.items.push("new item") } // when called, will initialize all dropdown and all checkboxes. initializeDropdown(){ $('.ui.checkbox').checkbox(); $('.ui.dropdown').dropdown({action:'nothing'}); } // Called after the ngAfterViewInit and every subsequent ngAfterContentChecked(). ngAfterViewChecked() { this.initializeDropdown(); } }