複選框不適用於角2和語義UI中的ngfor

Question

我正在使用Angular2和語義UI，我想創建一個複選框，如https://jsfiddle.net/jp8xj0wk/2/，但當我使用* ngFor迭代時，複選框不會'噸的工作，但如果我手動插入複選框項目只有這些工作正常。

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'}); 
    } 
} 

Answer 1

這是一個很好的用例的組件lifecycle hooks，我要去一個按鈕添加到您的組件來說明解決方案。這個新按鈕將爲陣列添加一個新元素，僅此而已。

這裏是一個工作plunker：https://plnkr.co/edit/K5MWKzfCFjGmeOzYYxIJ?p=preview

這裏最主要的事情，就是你添加陣列或ngOnInit之前，你初始化複選框，並在AfterViewChecked

選擇這種方式，每次有一個變化（比如向數組添加一個新元素）。當Angular完成渲染視圖時，它會調用AfterViewChecked，在那裏我們啓動選擇和複選框。

@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(); 
    } 
}