Ways to initiate update notification when altering an array object?

Question

Ways to initiate update notification when altering an array object?

I am working on my Angular4 app and I have a component that uses a *ngFor directive to iterate over an array:

 <div *ngFor="let person of persons">
   {{person.name}}
   {{person.car}}
 </div>

Within the same component, there is a feature to delete a car. After successfully deleting a car using the deleteCar() method, I update the persons array as follows:

 deleteCar(car) {
   this.carService.deleteCar(car).subscribe(() =>  {
   this.persons.filter(obj => obj.car == car.name)
               .forEach(i => i.car = null);
   }
 }

The issue I'm facing is that the *ngFor loop does not get triggered when I make changes to an existing person object in the persons array. How can I fix this problem?

angular typescript

Answer 1

Answer №1

To efficiently handle this situation, I utilize array destructuring. While it may not be considered the optimal approach, it gets the job done.

this.items = [...this.items];

By altering the reference of the array in this manner, Angular is able to detect and acknowledge the changes made to the array.

Answer 2

To efficiently handle this situation, I utilize array destructuring. While it may not be considered the optimal approach, it gets the job done.

this.items = [...this.items];

By altering the reference of the array in this manner, Angular is able to detect and acknowledge the changes made to the array.

Answer 3

Answer №2

To efficiently achieve this goal, it is recommended to utilize a behavior subject within a service and then access it within your component.

Here is an example of what your service class might look like:

@Injectable()
export class PersonService {

private persons = new BehaviorSubject<any[]>([]);
public persons$ = this.persons.asObservable(); // --> This can be accessed in your component

constructor() {
   // Set the initial values for the persons array here;
}

function deleteCar()//todo  

}

In your component:

constructor(private personService: PersonService) {

}

ngOnInit() {
    this.persons = this.personService.persons$; // Don't forget to use the async pipe or subscribe
}

delete(car){
    this.personService.deleteCar(car);
}

This method should effectively work.

For more information, refer to https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 4

To efficiently achieve this goal, it is recommended to utilize a behavior subject within a service and then access it within your component.

Here is an example of what your service class might look like:

@Injectable()
export class PersonService {

private persons = new BehaviorSubject<any[]>([]);
public persons$ = this.persons.asObservable(); // --> This can be accessed in your component

constructor() {
   // Set the initial values for the persons array here;
}

function deleteCar()//todo  

}

In your component:

constructor(private personService: PersonService) {

}

ngOnInit() {
    this.persons = this.personService.persons$; // Don't forget to use the async pipe or subscribe
}

delete(car){
    this.personService.deleteCar(car);
}

This method should effectively work.

For more information, refer to https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Ways to initiate update notification when altering an array object?

Answer №1

Answer №2

Similar questions

Limit the parameter of a TypeScript method decorator based on the method's type

Next.js is experiencing issues with the build process

Encountering an issue with Angular 8 and Material where a table does not fully render on mobile browsers like Chrome, causing rows to only half

The issue with Angular Material Dialog hiding certain elements

BrowserRouter - The type '{ children: Element; }' is not compatible with the type 'IntrinsicAttributes', as they do not share any properties in common

Ways to organize an Angular Material Design table during the rendering/creation process

I encountered login issues when trying to access dist/index.html in my Angular 8 application, but I found a workaround by utilizing the proxy.conf.json file, which

Is it more appropriate to initialize my FormGroup in the container component or the presentational component? I appreciate your help

"Upon studying the Reflect-metadata index.d.ts file, I find myself perplexed by the variances in

Function in Typescript that accepts an array or a single instance of a constructor and then returns a list

Attempting to simulate the behavior of Angular2 Token during testing

Is it possible to utilize useRef to transfer a reference of an element to a child component?

Executing a node.js function within an Angular 2 application

"Utilize PrimeNG's p-tabpanel to bind a unique style class to

The function did not return a Promise or value as expected when using async and await

How come TypeScript doesn't recognize my MongoDB ObjectID as a valid type?

Errors in TypeScript Compiler for using react-bootstrap in SPFx project

Issues encountered while setting up @angular/google-maps on angular13

Leveraging an external TypeScript library in a TypeScript internal module

TypeScript: The class results in an empty object being returned