angular 中过滤后的数据未刷新
filtered data not refreshing in angular
我正在尝试根据 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>
当我在搜索框中输入姓名时,这是有效的,但当我从姓名中删除字符时,结果不会刷新新数据。
例如-
我有数据=[{name:'Amir','age':28},{name:'AAmir', age:26},{name:'AAAmir', age:30}]
现在,如果我将 AA 放入搜索框中,它将显示最后两个结果,如果我将 AAA 放入,那么它现在将仅显示最后一个 emp 数据,如果我从输入字段中删除两个或更多字符,假设新输入是 A,那么结果仅显示最后一名员工数据
请提前help.Thanks
可能是您过滤后的数组指向与原始数组相同的数组,这就是您要更改原始数组的原因。我已经完成了一些相同的代码:-
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():''));
}
}
我正在尝试根据 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>
当我在搜索框中输入姓名时,这是有效的,但当我从姓名中删除字符时,结果不会刷新新数据。
例如-
我有数据=[{name:'Amir','age':28},{name:'AAmir', age:26},{name:'AAAmir', age:30}]
现在,如果我将 AA 放入搜索框中,它将显示最后两个结果,如果我将 AAA 放入,那么它现在将仅显示最后一个 emp 数据,如果我从输入字段中删除两个或更多字符,假设新输入是 A,那么结果仅显示最后一名员工数据
请提前help.Thanks
可能是您过滤后的数组指向与原始数组相同的数组,这就是您要更改原始数组的原因。我已经完成了一些相同的代码:-
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():''));
}
}