在 ionic3 中搜索数据后原始数组值是否发生变化？

Question

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

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

您需要深复制您的对象列表。由于 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);

Answer 2

查看您的声明

i have also hold the data in the another array but not working it is affect on the original array.

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

解决方法是复制每一项。如果数组中的项目是基本的简单对象（没有嵌套字段），使用 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在array complex json对象中，我还是更喜欢用lodash cloneDeep。请明智地使用它，因为如果它是大数组，它会影响内存。

import * as _ from 'lodash';

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

希望对您有所帮助

在 ionic3 中搜索数据后原始数组值是否发生变化？

Original array value are change after search data in ionic3?

typescript

ionic3