javascript - Angular 4组件被选中的复选框

Question

我是 Angular 的新手，我想获取当前选中的复选框 ID。我已经检查了 SO 中的其他线程，但它们中的大多数都与 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

您可以使用 [checked] 属性并将变量绑定(bind)到它，它应该是一个 bool 值

 <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}}"
  />

和 TS

内部

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