过滤后的数据不以角度刷新答案

【问题标题】：filtered data not refreshing in angular过滤后的数据不以角度刷新
【发布时间】：2020-05-28 12:42:04
【问题描述】：

我正在尝试根据姓氏过滤对象数组。

 filterItems(searchTerm) {
    return this.EmpData.filter(emp => {
      return emp.lastName.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1 || driver.firstName.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });
  }

在html模板中

 <ion-list *ngIf="showEmpList">
                <ion-item *ngFor="let item of EmpData" button (click)="selectEmp(item.lastName)">
                    <ion-label>{{item.lastName}}, {{item.middle}}, {{item.firstName}}</ion-label>
                </ion-item>
     </ion-list>

这在我在搜索框中输入名称时有效，但是当我从名称中删除字符时，结果不会用新数据刷新。例如- 我有数据=[{name:'Amir','age':28},{name:'AAmir', age:26},{name:'AAAmir', age:30}] 现在，如果我将 AA 放入搜索框中，它将显示最后两个结果，如果我放入 AAA，那么现在如果我从输入字段中删除两个或更多字符，假设新输入为 A，那么它将仅显示最后一个 emp 数据假设新输入是 A，那么结果正在显示仅作为最后一名员工数据

请帮忙。提前致谢

【问题讨论】：

你能提供一个stackblitz吗？
看到这个：-stackblitz.com/edit/ionic-gqingy。它有效。
嗨，Akash，当我放入静态数据时，它对我来说工作正常，但是当我尝试从 api 获取数据时遇到这个问题
它应该以同样的方式工作，直到你有一些其他类型的代码，提供一个堆栈闪电战？
感谢您的示例解决了我的问题。问题是我没有将过滤后的数据存储在新的变量中，在这种情况下我的原始数组被归档，因此我没有得到想要的结果。谢啦。您可以在答案中添加链接，以便我接受。

标签： angular ionic3 ionic4

【解决方案1】：

可能是您过滤后的数组指向与原始数组相同的数组，这就是您更改原始数组的原因。我已经为相同的代码做了一些代码：-

Stackblitz 网址：- https://stackblitz.com/edit/ionic-gqingy

HTML :-

 <input type="text" [(ngModel)]="filterText" (ngModelChange)="filterValues()"/>

 <ion-list>
                <ion-item *ngFor="let item of filteredData" button (click)="selectEmp(item.lastName)">
                    <ion-label>{{item.name}}, {{item.age}}</ion-label>
                </ion-item>
     </ion-list>

TS :-

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;
  EmpData = [{name:'Amir',age:28},{name:'AAmir', age:26},{name:'AAAmir', age:30}];
  filteredData = [{name:'Amir',age:28},{name:'AAmir', age:26},{name:'AAAmir', age:30}];
  public filterText: string = '';
  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

    });
  }

  public filterValues() {
    this.filteredData = this.EmpData.filter((data) => data.name.toLowerCase().includes(this.filterText? this.filterText.toLowerCase():''));
  }
}

【讨论】：