Angular 搜索表格

通过WebService，我向前端发送一个Json并映射它，以便将其所有内容放入一个表中，我想建立一个搜索方法，只查看包含搜索字母的行

组件技术

allCountries:allCountries[];
applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.allCountries.filter = filterValue.trim().toLowerCase();
  }     ^^^^^^^^^^^^
           ERROR

映射

export class allCountries{
    name:string;
    iso2:string;
    iso3:string;
    unicode:string;
    dial:string;
    currency:string;
    capital:string;
    continent:string;
}

HTML

Ricerca
纳齐翁
{{allCountries.name}
iso 2
{{allCountries.iso2}}

错误

错误TS2322:类型“string”不可分配给类型“{（callbackfn:（值：allCountries，索引：number，数组：allCountries[]）=>值为S，thisArg？：any）：S[]；（callbackfn:（值：allCountries，索引：number，数组：allCountries[]）=>未知，thisArg？：any allCountries[]；”。

我发现这个错误是因为“过滤器”适用于简单数组，而不适用于对象数组。 我没有发布所有的代码，因为它与我的问题无关，因此毫无用处。

---

感谢您的帮助

这里的问题是

Array.filter

是一个函数而不是属性。所以不能这样分配：

this.allCountries.filter=

相反，应该将其作为函数调用，将另一个将进行过滤的函数作为参数传递

筛选名称中包含类型化子字符串的国家的示例（函数

String.includes（）

：

保留两个独立的数组是一个好主意，一个是所有国家都不可变（

allCountries

），另一个是根据键入的文本（例如：

filteredCountries

）具有给定筛选国家的数组。否则每个筛选周期都会减少数组，最终国家数组将为空

这是总体思路：

export class AppComponent {
  allCountries = [
    {
      name: "England"
    },
    {
      name: "France"
    }
  ];

  filteredCountries = [];
  ngOnInit() {
    this.filteredCountries = this.allCountries;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    if (!filterValue) {
      //empty filter, show all countries:
      this.filteredCountries = this.allCountries;
    } else {
      console.log("Filtering for " + filterValue);
      this.filteredCountries = this.allCountries.filter(
        obj => obj.name.toLowerCase().includes(filterValue.trim().toLowerCase())
      );
    }
  }
}

在html中，而不是在

所有国家/地区

中，应该绑定到

filteredCountries

：

  this.filteredCountries = this.allCountries.filter(
      obj => obj.name.toLowerCase().includes(filterValue.trim().toLowerCase())    
  );

<table mat-table [dataSource]="filteredCountries">

  <!-- code omitted for brevity -->

</table>

下面是一个stackblitz，其工作代码如下：

---

您在哪里设置

this.allCountries

的值？在执行此操作的行中放置一个断点

this.allCountries=…

，很可能您会看到它不是分配给该变量的数组。allCountries=allCountries[]，实际上，我正在将这个变量的值分配给从Web服务传入的json的映射器。问题是筛选或排序只适用于数组。非常感谢兄弟，你为我节省了很多时间

export class AppComponent {
  allCountries = [
    {
      name: "England"
    },
    {
      name: "France"
    }
  ];

  filteredCountries = [];
  ngOnInit() {
    this.filteredCountries = this.allCountries;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    if (!filterValue) {
      //empty filter, show all countries:
      this.filteredCountries = this.allCountries;
    } else {
      console.log("Filtering for " + filterValue);
      this.filteredCountries = this.allCountries.filter(
        obj => obj.name.toLowerCase().includes(filterValue.trim().toLowerCase())
      );
    }
  }
}

<table mat-table [dataSource]="filteredCountries">

  <!-- code omitted for brevity -->

</table>