Угловой 2 - Фильтр NGX-DataTable - Замена дочернего вида

Question

Я пытаюсь использовать опцию фильтрации NGX-DataTable ( здесь документ, здесь демонстрация) и пытаюсь переписать раздел кода ViewChild, потому что я буду динамически передавать таблицу компоненту диалога через переменную "config", чтобы я мог поиск в столбце "Заказ на покупку".

Я могу получить таблицу для фильтрации по столбцу Заказ на покупку, но у меня есть 2 проблемы:

1. Я не могу отменить фильтрацию, удалив на входе.
   Пример: если у меня есть 10 результатов по умолчанию, а затем введите "a" и 4 результата, а затем введите "aa", и у меня не будет результатов, даже если я полностью удалю данные, использованные для фильтрации, у меня все равно не будет результатов.

2. Когда фильтр обновляется, предполагается, что таблица вернется на первую страницу, сейчас она просто остается там, где она есть.

Любые указатели будут оценены!

Итак, вот что у меня есть в диалоговом компоненте, в котором информация о таблице передается через переменную config:

HTML в компоненте диалога:

 <input
    type='text'
    style='padding:8px;margin:15px auto;width:30%;'
    placeholder='Type to filter the name column...'
    autofocus
    (keyup)='updateFilter($event)'
  />

<ngx-datatable
  class='material'
  #table
  [rows]='config.rows'
  [columns]="config.columns"
  [columnMode]="'standard'"
  [headerHeight]="75"
  [footerHeight]="50"
  [scrollbarH]="true"
  [rowHeight]="'auto'"
  [limit]="5"
  [selectionType]="'multiClick'"
  >
</ngx-datatable>

TS:

import { Component, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { KeysPipe} from '../keys.pipe';

@Component({
  selector: 'app-dialog-table',
  templateUrl: './dialog-table.component.html',
  styleUrls: ['./dialog-table.component.css']
})
export class DialogTableComponent implements OnInit {

    config: any;
    columns: any;
  table = {
    offset: 0,
  };
  temp = [];

  constructor(public dialogRef: MdDialogRef<DialogTableComponent>) { 

  }

  updateFilter(event) {
    const val = event.target.value;
    this.temp = [...this.config.rows];

    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.purchaseOrder.indexOf(val) !== -1 || !val;
    });

    // update the rows
    this.config.rows = temp;

    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
  }

  ngOnInit() {
  }

}

Answer 1

Вчера у меня возникла та же проблема, и я исправил ее, добавив еще одно имя временного массива с именем temp2, поэтому при каждом нажатии клавиши строка будет заполняться данными temp2, которые в основном являются начальным значением данных строки. как это:

import { Component, NgModule } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@IonicPage()
@Component({
  selector: 'page-commande',
  templateUrl: 'commande.html',
})
export class CommandePage {
  rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
  ];
  columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];
  temp = [];
  temp2 = this.rows; // this the new temp array
  table = {
   offset: 0,
  };

  updateFilter(event) {
   const val = event.target.value.toLowerCase();
   this.rows = [...this.temp2]; // and here you have to initialize it with your data
   this.temp = [...this.rows];
    // filter our data
    const temp = this.rows.filter(function(d) {
      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
    });
    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
 }
}