Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何仅更改一行而不是所有行的切换值_Javascript_Html_Angular_Typescript - Fatal编程技术网

Javascript 如何仅更改一行而不是所有行的切换值

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

我有一个mat切换作为mat表中的一列。我正在更改切换开/关的值。但是问题是,如果我更改了值,那么所有行的值都会更改。我只想为特定的行执行此操作。我该怎么做呢

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>

要将切换状态绑定到,每一行都需要一个属性

例如:

组件数据:

....
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>
...