Javascript 如何仅更改一行而不是所有行的切换值
我有一个mat切换作为mat表中的一列。我正在更改切换开/关的值。但是问题是,如果我更改了值,那么所有行的值都会更改。我只想为特定的行执行此操作。我该怎么做呢 HTML代码:Javascript 如何仅更改一行而不是所有行的切换值,javascript,html,angular,typescript,Javascript,Html,Angular,Typescript,我有一个mat切换作为mat表中的一列。我正在更改切换开/关的值。但是问题是,如果我更改了值,那么所有行的值都会更改。我只想为特定的行执行此操作。我该怎么做呢 HTML代码: <ng-container matColumnDef="active"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Reschedule</th> <td mat-cell *matCellDef="let
<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>
要将切换状态绑定到,每一行都需要一个属性 例如: 组件数据:
....
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>
...
。。。
切换
...
检查此项是否有可用版本。您需要在元素上定义一个属性,该属性保存消息并仅切换此元素的属性。如果数据来自API且不包含activate:true值,该怎么办。我是否需要更改后端或是否有其他方法。取决于您要归档的内容。您的价值是否仅在前端需要,而在后端不使用。。。
...
<!-- 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>
...