Угловой 2 код для нескольких фильтров

Question

Я новичок в угловых js. Я пытаюсь достичь такой же функциональности с угловым 2 как here.

HTML, который я использовал в угловом 1 ниже:

Basically i have an array like: 
[ 
    {name: 'Wine A', category: 'red'}, 
    {name: 'Wine B', category: 'red'}, 
    {name: 'Wine C', category: 'white'}, 
    {name: 'Wine D', category: 'red'}, 
    {name: 'Wine E', category: 'red'}, 
    {name: 'Wine F', category: 'white'}, 
    {name: 'Wine G', category: 'champagne'}, 
    {name: 'Wine H', category: 'champagne'}  
    ]; 

Массив может иметь более 2 атрибуты. Я хочу, чтобы для каждого из атрибутов были созданы фильтры флажков, как в примере js fiddle, который я дал.

Я провел два дня, но не смог сделать то же самое.

Answer 1

angular2 способ итерации массив с ngFor директивой

<div *ngFor="let wine of wineArray" > 
    <input type="checkbox" [(ngModel)]="wine.selected"> 
    <label>{{ wine.name }}</label> 
</div> 

Мы связать выбор флажка для исходного массива с помощью ngModel

Более подробной информации о ngFor & ngModel доступен в documentation

Если вы знакомы с Angular1, также существует useful conversion guide для методов отображения от ng1 до ng2