角度2とセマンティックUIのngforでチェックボックスが機能しない

Question

Angular2とSemantic 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が呼び出され、selectとcheckboxが初期化されます。

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