Обновляйте элемент ion после каждого удаления в приложении Ionic

#angular #ionic-framework #multidimensional-array

#angular #ionic-framework #многомерный массив

Вопрос:

У меня есть приложение ionic, в котором я сохраняю данные в локальном хранилище.

Теперь я удаляю каждую запись из пользовательского интерфейса. Я могу удалить каждую запись из localstorage, но не могу отразить страницу без обновления страницы.

Я использовал this.navCtrl.setRoot(this.navCtrl.getActive().component); , но это удаляет все предыдущие функции страницы, такие как кнопка «Назад».

Пожалуйста, помогите подсказать, где я делаю ошибку.

Мой home.html выглядит как показано ниже:

 <ng-container *ngFor="let item of allObj1;let index = index" >
   <ion-item no-lines text-wrap  class="items"  *ngIf='this.allObj1.length > 0'>    
     {{item}} 
       <button ion-button color="orange" (click)="deletereminder(index)" >
          <ion-icon name="trash" item-right ></ion-icon>
       </button>
   </ion-item>
</ng-container>
  

Моя функция удаления выглядит следующим образом:

 deletereminder(index){
   var newObj = JSON.parse(localStorage.getItem('Data'));
   var indextodelete = index;
   newObj.data.splice(indextodelete, 1)
   localStorage.setItem('Data', JSON.stringify(newObj));
   var newObj1 = JSON.parse(localStorage.getItem('Data'));
// this.navCtrl.setRoot(this.navCtrl.getActive().component);
}
  

Приведенная ниже функция используется для извлечения массива из localstorage и отображения в пользовательском интерфейсе.

 /**Start of code for display of saved datafrom localstorage*/
var fullbodyretrievedData = localStorage.getItem("Data");
let fullbodyarray = JSON.parse(fullbodyretrievedData);
if( fullbodyretrievedData !=null){
   this.fullbodylocalstoragelength = fullbodyarray.data.length;
   var fullbodylocalStorageArray = new Array();
   for (var i=0;i<this.fullbodylocalstoragelength;  i){
      fullbodylocalStorageArray[i] = fullbodyarray.data[i];
   }
   var fullbodysortedarray = fullbodylocalStorageArray;
   this.allObj1.push(fullbodysortedarray);
}
else{
   var fullbodysortedarray = [null];
   this.allObj1.push(fullbodysortedarray);
}
/**End of code for display of saved data from localstorage*/
  

Мой массив Localstorage выглядит следующим образом:

 Key:   Data
Value: {"data":[[0,"1600452960000"],[1,"1600453020000"]]}
  

Комментарии:

1. Вы отображаете свои данные из allObj1 .. но после удаления элемента из хранилища вы не удаляете его из allObj1 .. это также необходимо обновить новыми данными.. В идеале вы должны сделать это this.allObj1.splice(index,1) в своем deletereminder

2. я пытался использовать this.allObj1.splice(index,1) , но не работал

Ответ №1:

Я обновил функцию ниже строки кода, и теперь проблема решена.

 deletereminder(index){
   this.allObj1[0].splice(index,1) //Add this new line of code to resolve
   var newObj = JSON.parse(localStorage.getItem('Data'));
   var indextodelete = index;
   newObj.data.splice(indextodelete, 1)
   localStorage.setItem('Data', JSON.stringify(newObj));
   var newObj1 = JSON.parse(localStorage.getItem('Data'));
}