Удалите строки с помощью ngx-datatable

Я пытаюсь удалить свою первую строку из файла 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];
}

Однако я не знаю, почему удалена моя последняя строка. Даже если я изменю индекс своей функции, результат будет тем же. Прежде всего, мне интересно, есть ли лучший способ удалить строки из моей таблицы. Также мне очень интересно узнать, почему мой код не работает должным образом.

Спасибо.


angular ngx-datatable
person Jonor    schedule 06.08.2018    source источник
comment
опубликуйте свой шаблон   -  person Sajeetharan    schedule 06.08.2018
comment
Я отредактировал свой пост.   -  person Jonor    schedule 06.08.2018

Ответы (2)


arrow_upward
2
arrow_downward

Итак, после того, как я провел небольшое исследование, мой массив был «отфильтрован».

// 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.

person David Ćeranić    schedule 28.03.2019

arrow_upward
2
arrow_downward

Он удаляет только первый элемент, так как у вас одинаковое имя для всех сайтов, вы видите его как последний элемент.

STACKBLITZ DEMO

person Sajeetharan    schedule 06.08.2018
comment
Большое спасибо. Тогда как я могу удалить свою первую строку, сохранив имя site1? - person Jonor; 06.08.2018
comment
Что ты имеешь в виду? - person Sajeetharan; 06.08.2018
comment
В вашем примере stacklitz показано, как удалить первую строку с разными именами сайтов. Я хочу сохранить все мои элементы с именем Site1, но удалить первый из них. - person Jonor; 06.08.2018
comment
братан, но он удаляет только первый элемент - person Sajeetharan; 06.08.2018
comment
Мое плохое, я только что понял, извините. - person Jonor; 06.08.2018