键入时过滤不起作用（keyup）答案

【问题标题】：Filtering is not working when typing (keyup)键入时过滤不起作用（keyup）
【发布时间】：2017-10-25 01:28:36
【问题描述】：

我正在尝试在我的应用程序中实现ngx-datatable，到目前为止，我拥有的是一个包含一堆行的表格，第一列是一个切换按钮，我可以在其中查看有关该行的更多详细信息。我正在尝试实现一个搜索过滤器，并尝试按照有关 ngx-datatable 过滤的演示文档进行操作并四处搜索，但由于某种原因，我的过滤器无法正常工作，我不知道为什么了。

<input type="text" style='padding:8px;margin:15px auto;width:30%' placeholder="Search terms..." (keyup)='updateFilter($event)'>

<ngx-datatable #myTable class="material expandable"
  [rows]="terms"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  (page)="onPage($event)"
>

<ngx-datatable-row-detail [rowHeight]="100" (toggle)="onDetailToggle($event)">
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
    <div style="padding-left:35px;">
      <div><strong>Age:</strong></div>
      <div>{{row.Age}}</div>
      <div><strong>Location:</strong></div>
      <div>{{row.Location}}</div>
    </div>
  </ng-template>
</ngx-datatable-row-detail>

<ngx-datatable-column [width]="50" [canAutoResize]="false" [resizeable]="false" [sortable]="false" [draggable]="false">
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
    <a href="javascript:void(0)"
    [class.datatable-icon-right]="!expanded"
    [class.datatable-icon-down]="expanded"
    title="Expand/Collapse Term Detail"
    (click)="toggleExpandRow(row)">
    </a>
  </ng-template>
</ngx-datatable-column>


<ngx-datatable-column name="Name">
</ngx-datatable-column>
<ngx-datatable-column name="Gender">
</ngx-datatable-column>

</ngx-datatable>

export class PeopleTableComponent implements OnInit {
  @ViewChild('myTable') table: DatatableComponent;
  peopleArray: PeopleDetail[] = [];
  temp: PeopleDetail[] = [];
  expanded: any = {};
  timeout: any;

  constructor(private peopleService: PeopleService) {}

  ngOnInit() {
    this.peopleArray = this.peopleService.getPeople();
    this.temp = [...this.peopleArray]; //cache list?
  }

  getBusinessTerms(): PeopleDetail[] {
    return this.peopleArray = this.peopleService.getPeople();
  }

  onPage(event) {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      console.log('paged!', event);
    }, 100);
  }

  toggleExpandRow(row) {
    this.table.rowDetail.toggleExpandRow(row);
  }

  onDetailToggle(event) {
    console.log('Detail Toggled', event);
  }

  updateFilter(event) {
    const val = event.target.value.toLowerCase();
    const temp = this.temp.filter((d) => {
      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
    });
    this.peopleArray = temp;
    this.table.offset = 0;
  }
}

当我在输入中输入内容时，它立即变为No data to display。搜索后我真的很困惑，似乎我的updateFilter(event) 和其他人正在做同样的事情，但它对他们有用。

【问题讨论】：

标签： angular ngx-datatable

【解决方案1】：

看起来我解决了我的问题，我正在设置 this.temp = [...this.peopleArray]; 我需要做的是this.temp = this.peopleArray。因为我最初搜索的是一个空列表 (this.temp)，所以这就是过滤器不起作用的原因。

所以解决方案只在 ngOnInit() 方法中。

  ngOnInit() {
    this.terms = this.odmService.getBusinessGlossary();
    this.temp = this.terms;
  }

【讨论】：