如何在Angular 8材质表上动态编辑一行?

问题描述 投票:0回答:1

我无法在angular材质表上更新一行,当我改变一个单元格(对象表中的一个字段)的值时,字段的值实际上是改变了,但在浏览器上并没有直接显示出来,如何让一行的更新在执行按钮动作时,在浏览器上动态地看到呢?

这是我的代码

查看。

     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 widget-body">


            <!-- Position Column -->
            <ng-container matColumnDef="ref">
              <th mat-header-cell *matHeaderCellDef> Ref. </th>
              <td mat-cell *matCellDef="let element"> {{element.ref}} </td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="art">
              <th mat-header-cell *matHeaderCellDef> Nom Article </th>
              <td mat-cell *matCellDef="let element"> {{element.art}} </td>
            </ng-container>

            <!-- Weight Column -->
            <ng-container matColumnDef="quantity">
              <th mat-header-cell *matHeaderCellDef> Quantite </th>
              <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="red">
              <th mat-header-cell *matHeaderCellDef> Reduction </th>
              <td mat-cell *matCellDef="let element"> {{element.red}} </td>
            </ng-container>

            <ng-container matColumnDef="prixht">
              <th mat-header-cell *matHeaderCellDef> Prix Hors Taxe </th>
              <td mat-cell *matCellDef="let element"> {{element.prixht}} </td>
            </ng-container>


            <ng-container matColumnDef="tva">
              <th mat-header-cell *matHeaderCellDef> TVA </th>
              <td mat-cell *matCellDef="let element"> {{element.tva}} </td>
            </ng-container>

            <ng-container matColumnDef="prixtt">
              <th mat-header-cell *matHeaderCellDef> Prix Total </th>
              <td mat-cell *matCellDef="let element"> {{element.prixtt}} </td>
            </ng-container>

          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef width="106px" class="kt-pl-13">
              Actions
            </th>
            <td mat-cell *matCellDef="let element">
              <button mat-icon-button color="primary" (click)="Update(element)" type="button" ><mat-icon>create</mat-icon></button>

            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

组件。

export class TableauComponent implements OnInit {
  displayedColumns: string[] = ['ref', 'art', 'quantity', 'red','prixht','tva','prixtt','actions'];
  dataSource = new MatTableDataSource<Data>();
  qte=18;

  constructor() {}

  ngOnInit()  {}

  Update(obj){

   for(var i=0;i<this.dataSource.data.length;i++){
      if(this.dataSource.data[i].ref==obj.ref){
         console.log(this.dataSource.data[i]);
         this.dataSource.data[i].quantity=qte;
          break;
      }
   }
   this.dataSource._updateChangeSubscription(); 
  }

}
```






angular angular-material mat-table
1个回答
0
投票

我终于找到了答案。使用ChangeDetectorRef使用markForCheck()或 detectChanges()

import { ...., ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
@Component({
  ........
  styleUrls: ['./tableau.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})


.....
constructor(.... private cd:ChangeDetectorRef) { }
....
onUpdateRow(obj,qte){
           .....
            this.dataSource._updateChangeSubscription(); 
           this.cd.markForCheck();  //or  cd.detectChanges();
        }
© www.soinside.com 2019 - 2024. All rights reserved.