Question

您好，请帮我尝试从列表中搜索，单词显示在列表中，但清除搜索栏后未显示任何内容，请帮助

这是我的home.html

<ion-searchbar (ionInput)="getItems($event)"[showCancelButton]="shouldShowCancel" (ionCancel)="onCancel($event)"></ion-searchbar>
</ion-header>
<ion-content padding>
<ion-list>
  <button ion-item *ngFor="let item of items" (click)="eXplain()">
    {{ item.word }}
  </button>
</ion-list>
</ion-content>

我的home.ts是：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

searchQuery: string = '';
  items:any;
  word:any;
  meaning:any;

  constructor(public navCtrl: NavController,  private http: Http, public alertCtrl: AlertController, public loading: LoadingController,public modalCtrl : ModalController) {

   this.initializeItems();

  }

 ngOnInit(){   

    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    let options = new RequestOptions({ headers: headers });

     let loader = this.loading.create({
        content: 'Processing please wait...',
      });

     loader.present().then(() => {

    this.http.post('**MY URL IS HERE**',options)
    .map(res => res.json())
    .subscribe(res => {

     loader.dismiss()
    this.items=res.server_response;

    console.log(this.items);
    });
    });
     }

initializeItems() {

 this.items;

  }

  getItems(ev) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the ev target
    var val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item: any) => {
        return (item.word.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

单词显示在列表上，但清除搜索栏后未显示任何内容，请帮忙

Answer 1

收到响应后，在ngOnInit内，将其深层复制到另一个变量中：

this.initialItems = res.server_response;
this.items = JSON.parse(JSON.stringify(this.initialItems));

请勿在构造函数中调用initializeItems，并将您的initializeItems方法更新为：

initializeItems() {
 this.items = JSON.parse(JSON.stringify(this.initialItems));
}

保持所有其他代码不变。

清除搜索栏后，Ionic 3搜索未显示列表

1 个答案: