javascript - 如何仅更改 1 行的切换值而不是全部

Question

我在 Mat-table 中有一个 mat-toggle 作为列。我正在更改打开/关闭开关的值。但是问题是如果我更改值，那么所有行的值都会更改。我只想为特定行执行此操作。我该怎么做。

HTML 代码:

<ng-container matColumnDef="active">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Reschedule</th>
  <td mat-cell *matCellDef="let element">
    <mat-slide-toggle (change)="setMessage($event)">{{
      message
    }}</mat-slide-toggle>
  </td>
</ng-container>

typescript 代码:

// Toggle Button Code
message = 'Disabled!';
setMessage(e) {
    if (e.checked) {
        this.message = 'Running';
    } else {
        this.message = 'Disabled!';
    }
}

Answer 1

您需要 的房产每行 将您的切换状态绑定(bind)到。

例如。:

组件数据:

....
const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', activate: true, role: '1' },
...

模板:

...
    <!-- toggle olumn -->
    <ng-container matColumnDef="toggle">
        <th mat-header-cell *matHeaderCellDef> toggle </th>
        <td mat-cell *matCellDef="let element" >
            <mat-slide-toggle [checked]="element.activate" (change)="updateActiveStatus(element)"></mat-slide-toggle>
        </td>
    </ng-container>
...

检查此 Stackblitz对于工作版本。