Question

我已经在ionic3中实现了搜索过滤器，但正在工作，但是从搜索栏中删除了字符串之后，它也将删除原始数组。我也将数据保存在另一个数组中，但不起作用，这会影响原始数组.tell me我的代码有什么问题？

triggerCmnFunmction(data : any) {
  if(data) {
      //postMethod for post data in the API.....
    this.service.postMethod1(this.service.baseurl()+ this.apiURL,data).then(data => {
      if(data.status) {

          //hold the data in array as well as set anothe array for filter the list.....
         this.noticeBoardList = data.data;

          this.filterDataList.event = this.noticeBoardList.event.map(item => Object.assign({}, item));
          this.filterDataList.holiday = this.noticeBoardList.holiday.map(item => Object.assign({}, item));
          this.filterDataList.notice = this.noticeBoardList.notice.map(item => Object.assign({}, item));

         //dismiss spinner
         this.service.dismissSpinner();
      } else {
          //reset array if not found any event....
         this.noticeBoardList = [];
      }
    },error => {
        //dismiss spinner
       this.service.dismissSpinner();
    });
  } 
}

    //searchData for serching 
    searchData() {

    //excute only if any record exist......
    if(this.filterDataList) {
        if(this.filterDataList.event) {
           this.filterDataList.event = this.noticeBoardList.event.filter((item) => {
            return item.title.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1 || item.event_place.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1
          });  
        }

       if(this.filterDataList.holiday) {
           this.filterDataList.holiday = this.noticeBoardList.holiday.filter((item) => {
            return item.title.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1 || item.event_place.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1
          });  
       }

       if(this.filterDataList.notice) {
          this.filterDataList.notice = this.noticeBoardList.notice.filter((item) => {
            return item.title.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1 || item.event_place.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1
          });  
       }
    }
}

<ion-searchbar #search
    [(ngModel)]="searchValue"
    [showCancelButton]="shouldShowCancel"
    (ionInput)="searchData($event)"
    (ionClear)="onCancel($event)">
  </ion-searchbar>

Answer 1

查看您的陈述

我也将数据保存在另一个数组中，但无法正常工作影响原始数组。

是的，因为如果我们使用=将数组分配给另一个变量，它将仍然存储为引用。

解决方案是复制每个项目。如果数组中的项是基本的简单对象（无嵌套字段），则使用object.assign或传播语法就足够了。

this.filterDataList = [...this.noticeBoardList]; // not robust if item is updated

// or

this.filterDataList = this.noticeBoardList.map(item => ({...item});

// or

this.filterDataList = this.noticeBoardList.map(item => Object.assign({}, item)); // if spread syntax is not supported

但是，如果item在数组复杂的json对象中，我仍然更喜欢使用lodash cloneDeep。请明智地使用它，因为如果它是大数组，它会影响内存。

import * as _ from 'lodash';

this.filterDataList = _.cloneDeep(this.noticeBoardList);

希望有帮助

Answer 2

您需要深度复制对象列表。由于Javascript对象存储为引用。将此添加到您的代码中

private deepCopyArrayObejct(array: any[]) {
    return array.map(x => Object.assign({}, x));
  }

并像这样使用它

//I'm assuming your data is list of objects.

this.filterDataList = this.deepCopyArrayObejct(this.noticeBoardList);

在ionic3中搜索数据后，原始数组值是否更改？

2 个答案: