阵列重置回垫复选框 - 角度 [英] array resets back mat checkbox - angular

问题描述

我试图将 checked value 存储在一个数组中，它是一个对象，因为它也包含该行的数据.

i am trying to store the checked value in an array, it is an object since it also consists data for the row.

component.html

component.html

<ng-container matColumnDef="actions">
  <th mat-header-cell *matHeaderCellDef> Action </th>
  <td mat-cell *matCellDef="let row; let i = index">
    <mat-checkbox (change)="$event ? selection.toggle(row) : null"
      [checked]="selection.isSelected(row)">
    </mat-checkbox>
  </td>
</ng-container>

component.ts

component.ts

  close() {
    this.selectedData[this.data.myKey] = this.selection.myValue;
    this.roleOlsMap.push(this.selectedData);     // this resets back

  }

Stackblitz

推荐答案

每次打开对话框时，您都会使用新的选择数据创建一个新实例，并且这些数据永远不会保存在对话框实例之外.您需要使用行数据保存选择，并在打开时使用选择初始化对话框:

Each time you open the dialog you are creating a new instance with new selection data, and this data is never saved outside the dialog instance. You need to save the selections with the row data and initialize the dialog with the selection when it is opened:

<mat-checkbox (click)="$event.stopPropagation()" 
  (change)="$event ? toggleSelection(row) : null"
  [checked]="selection.isSelected(row)">
</mat-checkbox>


export class OlsComponent implements OnInit {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
  listData: MatTableDataSource<any>;
  displayedColumns: string[] = ['ols', 'actions'];

  selection = new SelectionModel<any>(true, this.data.selected);

  ngOnInit() {
    this.listData = new MatTableDataSource(this.data.ols);
  }

  toggleSelection(row) {
    this.selection.toggle(row);
    this.data.selected = this.selection.selected;
  }
}

这篇关于阵列重置回垫复选框 - 角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！