как динамически редактировать строку в таблице материалов angular 8

Question

Я не могу обновить строку в таблице материалов angular, когда я изменяю значение ячейки (поле в таблице объектов), значение поля фактически изменяется, но оно не отображается непосредственно в browser, Как сделать так, чтобы обновление строки динамически отображалось в браузере при выполнении действия кнопки

это мой код

Просмотр:

     <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(); 
  }

}
```

Answer 1

Я наконец нашел ответ. Используйте 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();
        }