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