Ionic 3: массивы, указывающие на одинаковые значения

Question

Я занимаюсь разработкой приложения IOnic 3, и у меня возникает проблема с массивами в моем компоненте. Я использую массив для отображения моего списка пользователей (sortedUtilisateurs) и хочу получить аналогичный массив с такими же значениями (tabSearch).) но я не хочу, чтобы это изменилось, когда первый изменится.

К сожалению, sortedUtilisateurs изменяется как вкладкаSearch меняется на мой взгляд ...

Мой конструктор компонента ниже

constructor(
    public nav: NavController,
    public params: NavParams, 
    public utilisateurMetier : UtilisateurMetier, 
    public membreMetier: MembreMetier,
    public perimetreMetier: PerimetreMetier,
    public rootScope : GlobalVarsMetier,
    public techniqueMetier : TechniqueMetier,
    public dialogueMetier : DialogueMetier,
    public informationDestinataireMetier: InformationDestinataireMetier) 
    {
      this.loading = this.techniqueMetier.showLoadingProperTimes();


      this.trierParOrdreAlphabetique().then(tab =>  {
        this.tabSearch = tab;
        this.sortedUtilisateurs = tab;
      });
}

Моя функция инициализации

trierParOrdreAlphabetique()
{
    var deferred = new Promise(resolve => {
        this.showOtherButtons = false;
        this.loading.present();
        var deferredListerNotifications = new Promise<any>(resolveListerNotifications => {
            if(this.rootScope.perimetreConnecte == null)
            {
                this.utilisateurMetier.lister().then(tabUtilisateurs => {
                    resolveListerNotifications(tabUtilisateurs); 
                });
            }
            else
            {
                this.utilisateurMetier.listerByEspace(this.rootScope.perimetreConnecte.id).then(tabUtilisateurs => {
                        resolveListerNotifications(tabUtilisateurs); 
                });
            }
        });

        deferredListerNotifications.then(tabUtilisateurs =>
        {
            var sortedUtilisateurs = {};
            this.tabUtilisateurs = tabUtilisateurs;
            for(var i = 0; i < tabUtilisateurs.length; i++)
            {
                var utilisateur = tabUtilisateurs[i];
                var letter = utilisateur.nom.toUpperCase().charAt(0); 
                if(sortedUtilisateurs[letter] == undefined){
                    sortedUtilisateurs[letter] = [];
                }
                sortedUtilisateurs[letter].push(utilisateur);
            }
            this.isLoad = true;
            this.loading.dismiss();
            resolve(sortedUtilisateurs);
        });
    });

    return deferred;
}

У вас есть какие-нибудь полезные идеи для меня, пожалуйста?

Answer 1

Так что, похоже, что в вашем случае "tab" (результат), который присваивается двум другим переменным внутри конструктора, на самом деле является объектом js?Так как другие объяснили в этом случае, вы назначаете ссылку на тот же объект.

Поскольку значения свойств объекта кажутся массивами, вам необходимо соответствующим образом создать клон такого объекта.Я бы использовал что-то вроде этого:

  snapshot(object) {
    if (object == null || typeof (object) != 'object') return object;
    let temp = new object.constructor();
    for (var key in object) {
      if (object.hasOwnProperty(key)) {
        temp[key] = this.snapshot(object[key]);
      }
    }
    return temp;
  };

тогда в вашем методе:

this.trierParOrdreAlphabetique().then(tab =>  {
        this.tabSearch = this.snapshot(tab);
        this.sortedUtilisateurs = this.snapshot(tab);
});

Answer 2

Issue

У вас проблема с той же ссылкой на массив.

Исправлено

Это довольно просто решитьвиды случаев путем создания глубокого клонирования Object или Array.

constructor(
    public nav: NavController,
    public params: NavParams, 
    public utilisateurMetier : UtilisateurMetier, 
    public membreMetier: MembreMetier,
    public perimetreMetier: PerimetreMetier,
    public rootScope : GlobalVarsMetier,
    public techniqueMetier : TechniqueMetier,
    public dialogueMetier : DialogueMetier,
    public informationDestinataireMetier: InformationDestinataireMetier) 
    {
      this.loading = this.techniqueMetier.showLoadingProperTimes();


      this.trierParOrdreAlphabetique().then(tab =>  {
        this.tabSearch = tab;
        this.sortedUtilisateurs = JSON.parse(JSON.stringify(tab)); //create clone
      });
}