Angular `mat-table` 双向绑定答案

【问题标题】：Angular `mat-table` two-way bindingAngular `mat-table` 双向绑定
【发布时间】：2020-09-29 07:08:08
【问题描述】：

mat-table 中的 mat-checkbox 存在绑定问题。表的dataSource 是一个基本的对象数组，每个对象都有一个选定的boolean 属性。由于某种原因，双向绑定不起作用，并且当点击事件被触发时，selected 总是返回 false。

代码是这样的：

app.component.ts

   clients: Client[] = [
       { id: 1, name: `Client`, disabled: true, selected: false },
   ];

   onClientClick(client: Client) {
       console.log(client) // selected here is false
   }

app.component.html

<table mat-table [dataSource]="clients">
    <ng-container matColumnDef="client-name">
        <th mat-header-cell *matHeaderCellDef>header</th>
        <td mat-cell *matCellDef="let client">
            <mat-checkbox (click)="onClientClick(client)" [(ngModel)]="client.selected" [disabled]="client.disabled">
                {{ client.name }}
            </mat-checkbox>
        </td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumnsClients"></tr>
</table>

有人可以帮忙吗？

【问题讨论】：

标签： angular typescript mat-table two-way-binding

【解决方案1】：

创建 MatTableDataSource 类型的 DataSource。

clients= new MatTableDataSource<any>([{ id: 1, name: 'Client', disabled: true, selected: false }]);

然后，

<table mat-table [dataSource]="clients">
<ng-container matColumnDef="client-name">
<th mat-header-cell *matHeaderCellDef>header</th>
<td mat-cell *matCellDef="let client">
    <mat-checkbox (click)="onClientClick(client)"
    [disabled]="client.disabled" [checked]="client.selected">
    {{ client.name }}
    </mat-checkbox>
</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumnsClients"></tr>

【讨论】：