как динамически удалять и редактировать строку с помощью ngx-datatable - PullRequest
Новая
       76

как динамически удалять и редактировать строку с помощью ngx-datatable

0 голосов
/ 06 мая 2020

Я несколько дней пытался динамически обновить массив ngx-datatable после безуспешного удаления строки.

В настоящее время обновление выполняется только после наведения указателя мыши на таблицу. что странно

мои пакеты: angular 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];
      }
}

1 Ответ

0 голосов
/ 07 мая 2020

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