angular - 如何使用 ngx-datatable 动态删除和编辑行

Question

几天来，我一直在尝试在删除一行但未成功后动态更新 ngx-datatable 数组。

目前，仅在将鼠标悬停在表格上之后才进行更新。这很奇怪

我的包：角度 8
“@swimlane/ngx-datatable”：“^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];
      }
}

标签： angularngx-datatable

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