ngx-datatable列筛选功能异常问题求助

我一眼就看出问题所在了——你没有正确保存原始的威胁数据集！

看你的代码：

• 在构造函数里，你把temp赋值给了空的threats数组，这时候temp也是空的。
• 当ngOnInit获取到后台数据后，你只更新了threats，但没同步更新temp。
• 每次调用filterThreatName时，你都是用当前的threats（已经被过滤过的）去做新的筛选，这就导致数据越筛越少，最后清空输入框时，根本没有原始数据可以恢复，自然显示"No data"。

修复步骤： #

1. 保存原始数据到temp数组：在获取到后台返回的威胁数据后，把完整的数据集赋值给temp，确保temp始终保存未过滤的原始数据。
2. 基于原始数据进行筛选：在筛选方法里，用temp数组来过滤，而不是当前的threats数组。

修改后的代码： #

threat.component.ts

import { Component, Inject, ChangeDetectorRef, OnInit, Input, ViewChild } from '@angular/core';
import { Threat } from '../../../../models/threat.model';
import { ThreatService } from '../../../../services/threat.service';
import { DatatableComponent } from '@swimlane/ngx-datatable';

@Component({
  selector: 'app-threat',
  templateUrl: './threat.component.html',
})
export class ThreatComponent implements OnInit {
  public showLoadingIcon: boolean;
  private ref: ChangeDetectorRef;
  threats: Threat[] = [];
  temp: Threat[] = []; // 保存原始数据
  @ViewChild(DatatableComponent) table: DatatableComponent;

  constructor(ref: ChangeDetectorRef, private threatService: ThreatService ) {
    this.ref = ref;
    this.showLoadingIcon = false;
    // 这里无需提前赋值，等获取数据后再更新temp
  }

  ngOnInit() {
    this.onGetThreats();
  }

  onGetThreats() {
    this.threatService.getThreats()
      .subscribe( response => {
        this.threats = response.items;
        this.temp = [...response.items]; // 关键：保存原始数据到temp，用扩展运算符做浅拷贝避免引用问题
      });
  }

  filterThreatName(event: any){
    const val = event.target.value.toLowerCase().trim(); // 加上trim处理空格
    // 基于原始数据temp进行筛选
    this.threats = this.temp.filter(result => {
      return result.name.toLowerCase().includes(val) || !val;
    });
    this.table.offset = 0; // 重置分页到第一页
  }
}

为什么这样改？ #

• temp现在始终保存着从后台获取的完整威胁数据，不会被筛选操作修改。
• 每次筛选都是从原始数据里重新过滤，所以不管是删除输入内容还是输入新的关键词，都能正确显示对应的结果，包括清空时恢复全部数据。
• 加上trim()是为了处理用户输入空格的情况，避免无意义的筛选。

这样修改后，你的筛选功能就能正常工作啦！

内容的提问来源于stack exchange，提问作者redux17