отфильтрованные данные не обновляются в angular

Question

Я пытаюсь отфильтровать массив объектов на основе last_name.

 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>

это работает, когда я набираю имя в поле поиска, но когда я удаляю символы из имени, результат не обновляется новыми данными. например, у меня есть data = [{name:'Amir','age':28},{name:'AAmir', age:26},{name:'AAAmir', age:30}] now i, если поместить AA в поле поиска, он отобразит два последних результата, и если я поставлю AAA, тогда он будет отображать только последние данные emp, если я удалю два или более символов из ввода предположим, что новый ввод - A, тогда результат отображается как данные только последнего сотрудника

пожалуйста, помогите. заранее спасибо

Answer 1

Может быть, ваш отфильтрованный массив указывает на тот же массив, что и исходный, поэтому вы изменяете исходный массив. Я написал код для того же: -

Stackblitz URL: - 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():''));
  }
}