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>

这是我的问题

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] 属性并将变量绑定到它，它应该是一个布尔值

 <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);
 }

Answer 2

根据@Sajeetharan的建议，我可以通过以下代码实现我的要求。

html

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

deviceCategory的模型

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

用于获取当前复选框的代码。

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

Angular 4组件获得选中复选框

2 个答案: