mardi 25 avril 2017

checkbox doesn't work with ngfor in angular 2 and semantic UI

I'm using Angular2 and Semantic UI and I want to create a multiple selection component with checkbox like this http://ift.tt/2piXlFO, but when I iterate with *ngFor the checkbox doesn't work, but if I insert manually checkbox items only these work fine.

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="">
          <label></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'});
  }
}




Aucun commentaire:

Enregistrer un commentaire