时间戳

首页 > 解决方案 > Angular - 材料表，更新单行而不是整个表（Angular v10）

angular - Angular - 材料表，更新单行而不是整个表（Angular v10）

问题描述

我在 UI 中有一个简单的角度材质表，例如

status
-------
On Time
Late
Missing

但是，当我通过 UI 更新其值时，所有值都会更改为相同的值。(HTML)


```
<ng-container matColumnDef="sla">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Status</th>
  <td mat-cell *matCellDef="let element">
  <button mat-button [matMenuTriggerFor]="menu">{{value}}</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item (click)="value= 'On Time'">On Time</button>
      <button mat-menu-item (click)="value= 'Late'">Late</button>
      <button mat-menu-item (click)="value= 'Missing'">Missing</button>
      <button mat-menu-item (click)="value= 'NDR'">NDR</button>
    </mat-menu>
  </td>
</ng-container>

（打字稿）

export class Status component implements OnInIt, OnDestroy {
    value =  'Late'
}
```

How can I save the value and let it persist, such that I can change it?

标签： angular

解决方案

此Stackblitz Link中的工作演示。

基本上，您只需要element.sla使用 mat-menu 更改表格列，然后将选定的菜单项分配给element.sla，这样您的表格数据也可以使用新的选定 mat-menu 数据更新！

<!-- Position Column -->
<ng-container matColumnDef="sla">
   <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
      <td mat-cell *matCellDef="let element">
       <button mat-button [matMenuTriggerFor]="menu">{{element.sla}}</button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="element.sla= 'On Time'">On Time</button>
          <button mat-menu-item (click)="element.sla = 'Late'">Late</button>
          <button mat-menu-item (click)="element.sla = 'Missing'">Missing</button>
          <button mat-menu-item (click)="element.sla = 'NDR'">NDR</button>
        </mat-menu>
      </td>
</ng-container>

推荐阅读