如何在Angular 4中选择表格单元格中的复选框？

Question

在我的数据中，我有一个布尔值显示在表中。我把它表示为一个复选框。如何使用此复选框显示值（已选中/未选中）？

以下是无效的代码段：

<tr *ngFor="let item of mf.data">
                        <td>{{item?.name}}<br><a href="#" class="text-success">{{item?.email}}</a></td>
                        <td class="text-center">
                            <input type="checkbox" [(ngModel)]='item.isManager'>
                        </td>
                        <td> {{item?.groupsAccess}}</td>
                        <td> {{item?.featuresAccess}}</td>
                        <td>{{item?.lastactive}}</td>
                        <td>{{item?.status}}</td>
                        <td>
                            <a href="javascript:;" ><i class="fa fa-cog" aria-hidden="true"></i> </a>
                        </td>
                    </tr>

这是JSON：

{
    "id": 0,
    "name": "Demo Mgr",
    "isAdmin":true,
    "email": "[email protected]",
    "groupsAccess": "All Drivers & Vehicles",
    "featuresAccess": "All Features",
    "lastactive" : "Jul 30 11:59 pm",
    "status": "Active"
}

如何在显示数据时选中此复选框？

Answer 1

您的HTML中似乎有一个错误。将其更改为以下内容：

<td class="text-center">
    <input type="checkbox" [(ngModel)]='item.isAdmin'>
</td>

Answer 2

HTML：

<tr *ngFor="let record of mf.data; let i = index" [attr.data-index]="i" [className]=" selectedAll==true || selectedRow.indexOf(i)>-1 ?
          'pointer selected' : 'pointer'">
          <td class=" text-left" width="20">
            <input type="checkbox" (change)="selectAll(i)" [checked]="selectedAll == true">
          </td>
          ...
        </tr>

TS：

export class YourComponent implements OnInit {
selectedRow: any;
selectedAll: boolean = false;
constructor(){
this.selectedRow = [];
}
selectAll(index) {
 if (typeof (index) == 'undefined') {
  this.selectedAll = !this.selectedAll;
  this.selectedRow = [];
 } else {
  this.selectedRow.push(index);
 }
}