使用 ngx-datatable 删除行

Question

我正在尝试从我的 ngx-datatable 中删除我的第一行。我在我的工作顶部创建了一个按钮 html :

 <button (click)="onRemoveRow(0)">Remove First Row</button>
<ngx-datatable
#table
class='material'
[columns]="columns"
[columnMode]="'force'"
[rowHeight]="'auto'"
[rows]='temp'
[headerHeight]="50"
[footerHeight]="50"
[limit]="5"
[rowClass]="getRowClass"
[selected]="selected"
[selectionType]="'checkbox'">
  </ngx-datatable-column>
  <ngx-datatable-column name="Site" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     Site 
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Filiere" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     Filiere
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Type" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     Type
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="TypeSource" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     TypeSource
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="MotifNotif" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     MotifNotif
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Canal">
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     Canal
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Modele" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     Modele
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="ChoixDefaut" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     ChoixDefaut
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  </ngx-datatable>

而且我试过拼接法:

 rows = [
{ site : 'Site1', filiere: 'ADE', type : 'AAAB', typeSource : 'ADH', motifNotif : 'AR',
 canal: 'EMAIL', modele: 'ME1', choixDefaut: ''},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'AR',
canal: 'EMAIL', modele: 'ME2'},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'AR',
canal: 'EMAIL', modele: 'ME22', choixDefaut: ''},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'RET',
canal: 'EMAIL', modele: 'ADH'},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'RET',
canal: 'EMAIL', modele: 'MEX', choixDefaut: ''},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'TRT',
canal: 'SMS', modele: 'MS1'},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'TRT',
canal: 'EMAIL', modele: 'EMY', choixDefaut: ''},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'RH', motifNotif : 'AR',
canal: 'SMS', modele: 'MSA', choixDefaut: '' },
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'RH', motifNotif : 'RET',
canal: 'EMAIL', modele: 'MEF'},
];

onRemoveRow(index : number) {
this.rows.splice(0, 1);
this.rows = [...this.rows];
}

但是，我不知道为什么我的最后一行被删除了。即使我更改函数的索引，结果也是一样的。首先，我想知道是否有更好的方法从我的 table 中删除行。我也很想知道为什么我的代码不能正常工作。

谢谢。

Answer 1

它只删除第一个元素，因为所有站点的名称都相同，所以您将其视为最后一个元素。

STACKBLITZ DEMO

Answer 2

所以在我做了一些研究之后，我的数组是 "filtered"。

// Remove file
  //row is passed by (click)="removeFile(row) in html"
  removeFile(row) {
    // you need this due to  https://swimlane.gitbook.io/ngx-datatable/change-detection
    this.filetitle = this.arrayRemove(this.filetitle, row.name)
  }

  arrayRemove(array, rowName) {

    return array.filter(function(element){
        return element.name != rowName;
    });

 }

您可以通过在（单击）中传递 $event 来获取您的值，并进一步获取 event.target.value。

使用 ngx-datatable 删除行

Remove rows with ngx-datatable

angular

ngx-datatable