Исходное значение массива изменяется после поиска данных в ionic3?

Question

У меня реализован поисковый фильтр в ionic3, он работает, но после удаления строки из панели поиска будет также удален исходный массив. Я также держу данные в другом массиве, но не работает, это влияет на исходный массивскажи мне, что не так в моем коде?

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

Однако, если элемент находится в массиве сложного объекта 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);