角4組件獲取選中複選框

Question

我是Angular的新手，我想獲取當前選中的複選框ID。我已經檢查過其他線程，但其中大部分都使用Controller，我正在使用組件。
以下是詳細信息。 我有這樣一個組件

<table class='table table-striped table-hover admin-form' *ngIf="deviceCategories"> 
<a (click)="test()">test</a> 
<thead> 
    <tr> 
     <td class="text-center">序列</td> 
     <th class="text-center">組名</th> 
     <th class="text-center">LOGO</th> 
     <th class="text-center">操作</th> 
    </tr> 
</thead> 
<tbody> 
    <tr *ngFor="let deviceCategory of deviceCategories | paginate: config"> 
     <td class="center"> 
      <input type="checkbox" ng-model="selected[deviceCategory.id]" id="checkbox_{{deviceCategory.id}}"> 
     </td> 
     <td class="text-center">{{deviceCategory.id}}</td> 
     <td class="text-center">{{deviceCategory.name}}</td> 
     <td class="text-center"><img src="{{deviceCategory.logoUrl}}" width="30" alt=""></td> 
     <td class="text-center project-actions"> 
      <a [routerLink]="['/management/deviceCategory/edit/',deviceCategory.id]" class="btn btn-white btn-xs text-muted"> <i class="fa fa-eye text-system"></i> 修改 </a> 
      <a (click)="OnDelete(deviceCategory.id)" class="btn btn-white btn-xs text-muted"> <i class="fa fa-eye text-system"></i> 刪除 </a> 
     </td> 
    </tr> 
</tbody> 

這裏是我的TS

import { Component, OnInit, Input } from '@angular/core'; 
import { PaginationInstance } from 'ng2-pagination'; 
import { DeviceCategoryService}from '../../../services/deviceCategory.service'; 
import { DeviceCategoryViewModel } from "../../../model/deviceCategory"; 


@Component({ 
    selector: 'app-device-category-admin-table', 
    templateUrl: './device-category-admin-table.component.html', 
    styleUrls: ['./device-category-admin-table.component.css'], 
    providers:[DeviceCategoryService] 
}) 
export class DeviceCategoryAdminTableComponent implements OnInit { 

    @Input() deviceCategories :any; 
    @Input() config:any; 

    public selected:{} 

    constructor(
    private deviceCategorySvc:DeviceCategoryService 
) { } 

    ngOnInit() { 
    } 

    OnDelete(id:number){ 
     this.deviceCategorySvc.deleteDeviceCategory(id).subscribe(result=>{ 
      if(result.ok) 
      { 
      this.deviceCategorySvc.currentCategorys().subscribe(result=>{ 
       this.deviceCategories=result.data as DeviceCategoryViewModel[]; 
      }); 

      } 

     }); 
    } 
    test(){ 
    var result=this.selected; 
     console.log(result); 
    } 

任何幫助，將不勝感激。

Answer 1

從@Sajeetharan的建議，我可以通過下面的代碼達到我的要求。

HTML

<td class="text-center"> 
     <input type="checkbox" [(ngModel)]="deviceCategory.checked" /> 
    </td> 

模型deviceCategory

export interface DeviceCategoryViewModel { 
     id?: number; 
     name?: string; 
     checked?:boolean; 
    } 

TS碼來獲取當前的框。

console.log(this.deviceCategories.filter(d=>d.checked===true)); 

Answer 2

可以使用[checked]屬性和變量綁定到它，它應該是一個布爾值

<input type="checkbox" [checked]="deviceCategory.checked" id="checkbox_{{deviceCategory.id}}" 
/> 

要獲得ID，您可以在(change)="getDeviceID()"

<input type="checkbox" (change)="getDeviceID(deviceCategory)" [checked]="deviceCategory.checked" id="checkbox_{{deviceCategory.id}}" 
    /> 

增加一個功能

and inside TS

getDeviceID(device:any) { 
     console.log(device.id); 
}