離子2列表中未過濾

Question

我下面這個教程： https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/

這是我search.html

<ion-header> 
    <ion-navbar> 
     <ion-title>search</ion-title> 
    </ion-navbar> 
    <ion-toolbar primary > 
     <ion-searchbar [(ngModel)]="searchTerm" [formControl]="searchControl" ></ion-searchbar> 
    </ion-toolbar> 
</ion-header> 

<ion-content padding> 
     <ion-list> 
      <ion-item *ngFor="let item of items" > 
       {{ item.name}} 
      </ion-item> 
     </ion-list> 
</ion-content> 

，這是我search.js

mport { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams,ViewController } from 'ionic-angular'; 
import { DataListProvider } from '../../../providers/data-list/data-list'; 
import { KeysPipe } from '../../../providers/pipes/pipes'; 
import 'rxjs/add/operator/debounceTime'; 
import { FormControl } from '@angular/forms'; 



@IonicPage() 
@Component({ 
    selector: 'page-country-list-modal', 
    templateUrl: 'country-list-modal.html', 
}) 
export class searchPage { 

    items=[] 
    items1=[] 

    searchTerm: string = ''; 
    searchControl: FormControl; 
    searching: any = false; 



    constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController, public dataListProvider : DataListProvider) { 
     this.searchControl = new FormControl(); 
    } 


    ngOnInit() { 
     console.log ('1234') 
     this.items1=JSON.parse(localStorage.getItem("countryList")) 

     for(let key in this.items1) { 
      if (key == "") 
      { 

      }else{ 
       this.items.push({ 'name': this.items1[key] }); 
      } 
     } 
    } 

    ionViewDidLoad() { 

     this.setFilteredItems(); 

     this.searchControl.valueChanges.debounceTime(700).subscribe(search => { 

      this.setFilteredItems(); 

     }); 
    } 


    setFilteredItems() 
    { 
     if (this.searchTerm) { 

      return this.items.filter(item => { 
       return item.name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1; 
      }); 
     } else { 
      return this.items; 
     } 
    } 


} 

但問題它根本沒有通過清單排序。如何解決這個問題

我的項目看起來像

[{ 「Name」： 「加拿大」}，{ 「名」： 「日本」} ....]

Answer 1

filter功能只是返回已過濾的數組，而不是修改原始數組。你需要做的是這樣的：

filteredItems =[]; 
setFilteredItems() 
    { 
     if (this.searchTerm) { 

      this.filteredItems = this.items.filter(item => { 
       return item.name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1; 
      }); 
     } else { 
      this.filteredItems = this.items; 
     } 
    } 

，並使用filteredItems到genarate項目模板