代码

Question

我有搜索栏，我想过滤数组结果，但不返回结果。

代码

HTML

// search bar
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

// results
<ion-list *ngIf="showList" class="studentsList">
  <ion-item *ngFor="let student of students">
    {{student.name}}
  </ion-item>
</ion-list>

Component

students: any[] = []; // sample data array provided below
showList: boolean = false;
searchQuery: string = '';

getItems(event) {
  if (event != '') {
    this.students = this.students.filter((v) => {
      return (v.name.toLowerCase().indexOf(event.srcElement.value.toLowerCase()) > -1);
    });
    this.showList = true;
  } else {
    this.showList = false;
  }
  console.log('count: ', event.srcElement.value, this.students.length);
}

Sample data array

{
    "data": [
        {
            "id": 4,
            "name": "Arina",
            "username": "arina",
            "email": "student1@student.com",
        },
        {
            "id": 5,
            "name": "Tom",
            "username": "tom",
            "email": "tom@student.com",
        }
    ],
    "message": "Students are ready."
}

有什么想法吗？

更新

请求的数据截图

Answer 1

我看到多个问题。

您正在将过滤后的学生分配回this.students变量。因此，对于下一次搜索，源列表不再可用。我想你可以引入另一个变量来保存过滤后的学生列表。
您正在检查条件为event != ''的空事件字段，而实际上应该为event.srcElement.value != ''。

尝试以下

控制器

studentsFiltered = [];

getItems(event) {
  if (event.srcElement.value != '') {
    this.studentsFiltered = this.students.filter((v) => {
      return (v.name.toLowerCase().indexOf(event.srcElement.value.toLowerCase()) > -1);
    });
    this.showList = true;
  } else {
    this.showList = false;
    this.studentsFiltered = [];
  }
  console.log('count: ', event.srcElement.value, this.studentsFiltered.length);
}

模板

<ion-list *ngIf="showList" class="studentsList">
  <ion-item *ngFor="let student of studentsFiltered">
    {{student.name}}
  </ion-item>
</ion-list>

Answer 2

您的方法有几个问题

getItems(event) {
  if (event != '') {
    this.students = this.students.filter((v) => {
      return (v.name.toLowerCase().indexOf(event.srcElement.value.toLowerCase()) > -1);
    });
    this.showList = true;
  } else {
    this.showList = false;
  }
  console.log('count: ', event.srcElement.value, this.students.length);
}

首先，event不是基于您从Angular标记$event传递过来的字符串，因此if (event != '')将始终为true。

因此，我们实际上想将事件的值与''进行比较，以确保输入了文本。

我们可以通过较小的重构来解决这两个问题

getItems(event: Event) {
  const value = event.target.value;
  if (value !== '') {
    this.students = this.students.filter((v) => {
      return (v.name.toLowerCase().indexOf(value.toLowerCase()) > -1);
    });
    this.showList = true;
  } else {
    this.showList = false;
  }
  console.log('count: ', value, this.students.length);
}

正如Micheal D所观察到的那样，如果我们将过滤后的students分配给students属性，我们将失去重置任何过滤功能的能力，因为我们没有原始数组。 / p>

要解决此问题，我们需要将原始学生存储在专用属性中，以便可以将过滤后的收藏集重置为该属性。实际上，我们应该在过滤器值为emtpty

时执行此操作

// original students array.
students: Student[] = [];

// filtered array we iterate over in search results
matchingStudents = [];

getItems(event: Event) {
  const value = event.target.value;
  if (value !== '') {
    this.matchingStudents = this.students.filter((v) => {
      return (v.name.toLowerCase().indexOf(value.toLowerCase()) > -1);
    });
    this.showList = true;
  } else {
    this.showList = false;
  }
  console.log('count: ', value, this.matchingStudents.length);
}

最后，我将做一些额外的清理工作，因为可以简化您的过滤器，使其同时更具可读性和简洁性

getItems(event: Event) {
  const value = (event.target.value || '').toLowerCase();
  this.showList = value !== '';
  if (showList) {
    this.matchingStudents = this.students.filter(v => v.name.toLowerCase().includes(value));
  }
  console.log('count: ', value, this.students.length);
}

模板

// search bar
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

// results
<ion-list *ngIf="showList" class="studentsList">
  <ion-item *ngFor="let student of matchingStudents">
    {{student.name}}
  </ion-item>
</ion-list>

角度过滤器阵列

代码

更新

2 个答案: