复选框不适用于角度 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();
  }
}