如何使用ngx-datable动态删除和编辑一条记录。

Question

我已经尝试了几天在删除一行后动态更新ngx-datable数组，但没有成功。

目前只有在鼠标悬停在表格上后才会更新，这很奇怪。

我的pakages：Angular 8 "@swimlanengx-datable": "^16.1.1",

这是我的代码

<ngx-datatable id="table1" [rows]="rows" 
        [columns]="columns"
        [headerHeight]="30"
        [rowHeight]="40"
        [scrollbarV]="false"
        [scrollbarH]="false"
        [rowClass]="getRowClass"
        >
        <ngx-datatable-column name="Ref" [width]='100'> </ngx-datatable-column>
        <ngx-datatable-column name="Art" va [width]='100'></ngx-datatable-column>
        <ngx-datatable-column name="Quantité" prop="quantity" [width]='100'></ngx-datatable-column>
        <ngx-datatable-column name="Prixtt" [width]='100'></ngx-datatable-column>
        <ngx-datatable-column name="Prixtt" [width]='100'></ngx-datatable-column>
        <ngx-datatable-column name="red" [width]='100'></ngx-datatable-column>
        <ngx-datatable-column name="toto" [width]='100'></ngx-datatable-column>
        <ngx-datatable-column name="Action" [width]='100'>
          <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>

            <button mat-icon-button color="primary" (click)="Edit(row)" type="button">
              <mat-icon>create</mat-icon>
            </button>

            <button mat-icon-button color="warn" (click)="Delete(row)" type="button">
              <mat-icon>delete</mat-icon>
            </button>

          </ng-template>
        </ngx-datatable-column>
        </ngx-datatable>





export class TableauComponent implements OnInit {



     rows =[{id:0,ref: 39, art: 'Fer a reppasser', quantity: 2, red: 10, prixht:4500, tva:20,prixtt:10200},
{id:1, ref: 40, art: 'Smartphone', quantity: 3, red: 10, prixht:4500, tva:20,prixtt:15000},
];;
  columns=[{ name:'id' }, { name: 'art' }, { name: 'quantity' }];
  quantite=18;

  Delete(obj){ 

  this.rows= this.rows.filter((value,key)=>{
    return value.id != obj.id;
  });
  this.rows= [...this.rows];
  }

      edit(obj){
       this.rows[obj.id]['quantity'] = quantite;
        this.rows = [...this.rows];
      }
}

Answer 1

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

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


.....
constructor(.... private cd:ChangeDetectorRef) { }
....
Delete(obj){  //also for edit() 
           .....

           this.cd.markForCheck();  //or  cd.detectChanges();
        }