如何獲得角2中選中的複選框的值2

Question

我正在嘗試使用Angular 2做簡單的待辦事項列表。我想知道用戶點擊了哪個複選框。基於點擊，我想刪除文本。我想我們可以使用：檢查CSS屬性。但是，我如何通過角度來實現這一點。

這是我迄今爲止所做的。

HTML：

<label *ngIf="isActivityEmpty()">No Activities to track! Start by adding one</label> 
    <ol *ngIf="!isActivityEmpty()"> 
    <div *ngFor="let activity of activityList" > 
     <input class="left" name="{{activity}}" type="checkbox" [(ngModel)]="chkbox"/> 
     <li class="checked-{{chkbox}}">{{activity}}</li> 
    </div> 
    </ol> 

組件：

export class AppComponent { 

    activity: string = ''; 
    activityList: string[] = ['Sign up for play','Start Playing']; 

    chkbox: boolean = false; 

    constructor() { 
    } 

    addActivity(){ 
    this.activityList.push(this.activity); 
    } 

    clearActivity(){ 
    this.activityList.length = 0; 
    } 

    isActivityEmpty(){ 
    let empty; 
    if(this.activityList.length==0) 
     empty = true; 
    else 
     empty = false; 

    return empty; 
    } 
} 

鏈接Plnkr - >https://plnkr.co/edit/iikSmd4eIwpbQDPoJFZu?p=preview

如果我選擇任何一個複選框，它選擇的所有複選框。

我是Angular 2的新手，任何幫助都不錯。

謝謝。

Answer 1

它的發生，因爲你使用的是相同的變量作爲ngModel，創建類似這樣的活動對象的數組，

export class Activity { 
    name:string, 
    checked : boolean; 
} 

和

export class AppComponent { 
    activity: Activity; 
    activityList: Activity[] = [{name:'Sign up for play',checked:false}, 
    {name:'Start Playing',checked:false}]; 

DEMO

Answer 2

已分配所有複選框都具有相同的屬性。這裏是固定/更新普拉克到您的代碼：https://plnkr.co/edit/E0rrwiVqzIrloTIpfKtT?p=preview

更新component.html文件：

<div> 
     <header> 
     Activity Tracker 
     </header> 

     <label *ngIf="isActivityEmpty()">No Activities to track! Start by adding one</label> 
     <ol *ngIf="!isActivityEmpty()"> 
     <div *ngFor="let activity of activityList" > 
      <input class="left" name="{{activity.title}}" type="checkbox" [(ngModel)]="activity.checked"/> 
      <li class="checked-{{activity.checked}}">{{activity.title}}</li> 
     </div> 
     </ol> 
     <br> 
     <input type="text" [(ngModel)]="activity.title" placeholder="Enter activity here" required/> 
     <br> 
     <button (click)="addActivity()">Add an Activity!</button> 
     <button (click)="clearActivity()">Clear All</button> 
    </div> 

更新component.ts文件：

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector : 'ta-app', 
    templateUrl : './src/app.component.html', 
    styleUrl : './style.css' 
}) 

export class AppComponent { 

    activity: Activity = new Activity(); 
    activityList: Activity[] = [new Activity('Sign up for play'), new Activity('Start Playing')]; 

    chkbox: boolean = false; 

    constructor() { 
    } 

    addActivity(){ 
    this.activityList.push(this.activity); 
    } 

    clearActivity(){ 
    this.activityList.length = 0; 
    } 

    isActivityEmpty(){ 
    let empty; 
    if(this.activityList.length==0) 
     empty = true; 
    else 
     empty = false; 

    return empty; 
    } 

} 

class Activity { 
    title: string; 
    checked: boolean; 

    constructor(title:string){ 
    this.title = title; 
    this.checked = false; 
    } 
}