how to refresh ionic 4 list items after deleting an element

Question

what I want to do is refresh ionic 4 list items after deleting an element, because i'm getting the error below:

html:

 <ion-list [hidden]="showAllStations==false">
      <ion-item *ngFor="let item of wayPoints; let i = index">
        <ion-label>{{item.location}}</ion-label>
        <ion-checkbox slot="start" 

        (ionChange)="delete(i)"></ion-checkbox>
      </ion-item>
      <ion-button  type="submit" (click)="deletStations()" expand="block" class="ion-text-center ion-margin-top" >Valide</ion-button>

    </ion-list>

ts:

 delete(index){

 console.log(index);
 this.deletedStations.push(index);
 // delete this.wayPoints[index];
 console.log(this.deletedStations);
}
 deletStations(){
  this.deletedStations.forEach(index => delete this.wayPoints[index]);
  console.log(this.wayPoints);
  this.modalCtrl.dismiss(this.wayPoints);
 }

error:

ERROR TypeError: Cannot read property 'location' of undefined

Answer 1

Try this :

    delete(index){
      this.wayPoints.splice(index, 1);
    }

you should simply remove the item from an array using the above method and your array will automatically be updated and changes will be reflected on the frontend in the list and in that case you don't need to refresh the list manually. GOOD LUCK :)