The array is not being spliced in the DOM, however, it is being spliced in the console - Ionic 2+/Angular

Question

The array is not being spliced in the DOM, however, it is being spliced in the console - Ionic 2+/Angular

My scenario involves a dynamic array filled with items and values. The goal is to remove an item from the view list when a user clicks a button on that particular item. I'm struggling to identify why this functionality isn't working as expected. Could it be due to how the data is structured? Despite seeing it being removed in the console, the issue persists. Any insights would be greatly appreciated. Thank you!

TS:

export class Page{
    items: Item[];

    constructor(public alertCtrl: AlertController){}

    removeitem(i) {
        let confirm = this.alertCtrl.create({
            title: 'Confirm',
            message: "text.",
            buttons: [
                {
                    text: 'Cancel',
                    handler: () => {
                        console.log('Disagree clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: () => { 
                        this.presentToast() 
                        this.items.splice(i, 1);

                    }
                }
            ]
        });
        confirm.present();
    }

getItems(){
   this.stopService.getItems().subscribe(item => { 
     this.items = item 
  })

  }


}

HTML:

<div *ngFor="let item of items; index as i ">
    <h3>{{item.description}}</h3>
    <button item-end ion-button full (click)="removeitem(i)">remove item</button>
</div>

EDIT

Here's how I retrieve items using a service --

getItems(): Observable<any> {
         return this.http.get(someEndpoint)
        .map(res => res.json());
    }

angular typescript ionic-framework ionic2

Answer 1

Answer №1

Follow these steps:

removeitem(i) {
        let confirm = this.alertCtrl.create({
            title: 'Confirm',
            message: "text.",
            buttons: [
                {
                    text: 'Cancel',
                    handler: () => {
                        console.log('Disagree clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: () => { 
                        this.presentToast() 
                        this.items = [...this.items.filter((item, index) => index !== i];
                    }
                }
            ]
        });
        confirm.present();
    }

This will completely modify the object reference and trigger a DOM update.

If the above approach doesn't work, try putting your splice inside a setTimeout function:

setTimeout(() => { this.items.splice(i, 1); }, 0);

You can also include public zone: NgZone in the constructor and execute splice within

this.zone.run(() => { this.items.splice(i, 1); });

. This method helps with change detection.

UPDATE:

In your getItems() method, consider the following code:

    getItems() {
       this.stopService.getItems().subscribe(item => { 
         this.items = [...item];
      });
   }

For more information, check out this Plunker demo:

Plunker demonstration

Answer 2

Follow these steps:

removeitem(i) {
        let confirm = this.alertCtrl.create({
            title: 'Confirm',
            message: "text.",
            buttons: [
                {
                    text: 'Cancel',
                    handler: () => {
                        console.log('Disagree clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: () => { 
                        this.presentToast() 
                        this.items = [...this.items.filter((item, index) => index !== i];
                    }
                }
            ]
        });
        confirm.present();
    }

This will completely modify the object reference and trigger a DOM update.

If the above approach doesn't work, try putting your splice inside a setTimeout function:

setTimeout(() => { this.items.splice(i, 1); }, 0);

You can also include public zone: NgZone in the constructor and execute splice within

this.zone.run(() => { this.items.splice(i, 1); });

. This method helps with change detection.

UPDATE:

In your getItems() method, consider the following code:

    getItems() {
       this.stopService.getItems().subscribe(item => { 
         this.items = [...item];
      });
   }

For more information, check out this Plunker demo:

Plunker demonstration

Answer 3

Answer №2

It appears that the Angular change detector was not triggered automatically. You can manually initiate it by following these steps:

import { ChangeDetectorRef } from '@angular/core';
constructor(private changeDetectorRef: ChangeDetectorRef) {

}
removeItem(i) {
        let confirm = this.alertCtrl.create({
            title: 'Confirm',
            message: "text.",
            buttons: [
                {
                    text: 'Cancel',
                    handler: () => {
                        console.log('Disagree clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: () => { 
                        this.presentToast();
                        this.items.splice(i, 1);
                        this.changeDetectorRef.detectChanges(); // Manually triggering the Angular change detector
                    }
                }
            ]
        });
        confirm.present();
    }

Answer 4

It appears that the Angular change detector was not triggered automatically. You can manually initiate it by following these steps:

import { ChangeDetectorRef } from '@angular/core';
constructor(private changeDetectorRef: ChangeDetectorRef) {

}
removeItem(i) {
        let confirm = this.alertCtrl.create({
            title: 'Confirm',
            message: "text.",
            buttons: [
                {
                    text: 'Cancel',
                    handler: () => {
                        console.log('Disagree clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: () => { 
                        this.presentToast();
                        this.items.splice(i, 1);
                        this.changeDetectorRef.detectChanges(); // Manually triggering the Angular change detector
                    }
                }
            ]
        });
        confirm.present();
    }

Answer 5

Answer №3

Take out the line let items = and add the following code below:

getItems(): Observable<any> {
         return this.http.get(someEndpoint)
        .map(res => res.json());
    }

For further information, refer to this link: Troubleshooting error message "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays"

Answer 6

Take out the line let items = and add the following code below:

getItems(): Observable<any> {
         return this.http.get(someEndpoint)
        .map(res => res.json());
    }

For further information, refer to this link: Troubleshooting error message "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays"

Answer 7

Answer №4

According to @robbannn, angular fails to detect the change, therefore modify

this.products.splice(i, 1);

In order to

this.product = this.products.splice(i, 1).slice()

Answer 8

According to @robbannn, angular fails to detect the change, therefore modify

this.products.splice(i, 1);

In order to

this.product = this.products.splice(i, 1).slice()

The array is not being spliced in the DOM, however, it is being spliced in the console - Ionic 2+/Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Set up Angular library by downloading from a specified local or network location

How can the count of specific values matching total records be determined in Angular/TypeScript using JSON?

Challenges encountered when assigning values in a form with Material UI, Formik, and Typescript

Setting a default value for a textfield within Angular 4

How to capture and log request and response data when using the HttpService in NestJS?

How can I achieve this using JavaScript?

Utilizing objects as values with `react-hook-form`

Angular2: Maintaining a continuous connection for a child component to receive input from the parent component post onInit

Having trouble with Angular 2 and Ionic2 mocks? Getting an error message that says "No provider

Steps to automatically set the database value as the default option in a dropdown menu

Access-Control-Allow-Methods does not allow the use of Method PUT in the preflight response, as stated by Firebase Cloud Functions

Changing a d3 event from JavaScript to Typescript in an Angular2 environment

Having trouble utilizing the ng-Command in Angular?

What is the best way to retrieve the previous URL in Angular after the current URL has been refreshed or changed

Issue: Unable to determine all parameters for FirebaseDataService

Limiting the assignment of type solely based on its own type, without considering the components of the type

The NGX countdown timer is experiencing a discrepancy when the 'leftTime' parameter exceeds 24 hours, causing it to not count down accurately

Typesafe-actions for defining typings of async actions reducers

angular 6 httpclient include login information in the URL

Linking a variable in typescript to a translation service