Question

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

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

Answer 1

看起来我修复了我的问题，我正在设置this.temp = [... this.peopleArray]; 我需要做的是this.temp = this.peopleArray。因为我最初正在搜索一个空列表（this.temp），这就是过滤器无法正常工作的原因。

所以解决方案只在ngOnInit（）方法中。

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

键入（keyup）

1 个答案: