Данные обновляются в каждом компоненте Angular 8 - PullRequest
Новая
       52

Данные обновляются в каждом компоненте Angular 8

1 голос
/ 06 августа 2020

У меня 3 компонента. Login, Current and Future. Когда пользователь вводит username and password на странице входа, выполняется вызов API в серверную часть для проверки пользователя. Если пользователь действителен, возвращается data. Теперь у меня есть служба commonData, которая вызывается для хранения data с использованием setMethod, а затем ngOnInit из Current and Future для извлечения данных с использованием getMethod. На странице Current в таблице представлены следующие данные: 

data {
         obj1{ 
              name [],
              usage[]
              },
         obj2{ 
              name [],
              usage[]
              }
}

как есть. Страница Future имеет форму, где количество полей = количеству объектов внутри данных. Имя поля формы = имя объекта. Использование - это то, что пользователь может изменить. Когда пользователь меняет использование, реализуется следующий лог c: 

receivedData;              // setter and getter methods in API
  constructor() {             // setter and getter methods in API
    this.receivedData = {};  // setter and getter methods in API
  }
  setReceivedData(val: object){   // setter and getter methods in API
    this.receivedData = val;
    localStorage.setItem('receivedData', this.receivedData);
  }
  getReceivedData(){                     // setter and getter methods in API
    return this.receivedData;
  }                             // setter and getter methods in API

 limitUser(event){         // limit the user to enter only numbers less than 5 in usage fields, if less than 0 is added or no number is added it is changed to 0
    for (let i = 0; i < this.data.length; i ++) {
      if(!this.data[i].usage){  
      this.data[i].usage  = 0;
      } 
    }
  }
  isInValid(index){
    return this.data[index].usage > 5;
  }
  get isFormInvalid(){
    return this.data.some(datum => datum.usage > 5);
  }

 for (let i = 0; i < this.data.length; i ++) {  // for loop to update the usage values
    if (this.data[i].usage === null || this.data[i].usage === "") {
      this.data[i].usage  = 0;
    } else {
      this.data[i].usage= this.data[i].usage;
    }
  }
this.postService.postMethod(this.headers, this.updatedData)

Теперь, когда я sh обновляю использование в объекте updatedData, он также обновляет значения, отображаемые на Current страница. Как решить эту проблему. Любая помощь приветствуется.

1 Ответ

2 голосов
/ 06 августа 2020

Я бы построил на том, что предложили вы и Алуан. Вы можете просто использовать npm: loda sh .clonedeep, чтобы установить loda sh в свой проект. Теперь в Future Component сделайте следующее: 

ngOnInit{
this. response = this.shareDataService.getReceivedData();
this.clonedObj = cloneDeep(this.response);
}

Теперь вы только клонируете объект в Future, поэтому, когда вы нажимаете свой api сообщения, обновленные значения будут go, но в Current компонент значения не должны быть затронуты. Он должен работать. Ура!

...