0

我正在尝试在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)正在做与其他人一样的事情，但它对他们有用。

4

1 回答 1

0

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

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

  ngOnInit() {
    this.terms = this.odmService.getBusinessGlossary();
    this.temp = this.terms;
  }
于 2017-10-24T17:04:08.763 回答