Monitoring modifications in elements within an array using Angular2

Question

Monitoring modifications in elements within an array using Angular2

Currently using Angular 2 and typescript, I have an array in which I am utilizing DoCheck and IterableDiffer to monitor any changes. While I receive notifications when the array itself is modified, I do not get notified if a property within one of the objects in the array changes. I attempted using KeyValueDiffer without success. It seems like I might need to adjust how I am using "_differs.find". Any suggestions?

@Component({
    selector: 'test'
})
@View({
    template: `
    <div>hello!</div>`
})
export class MyComponent implements DoCheck {

private _differ: IterableDiffer;
private _differ2: KeyValueDiffer;
_myItems: MyItem[];
@Input()
set myItems(value: MyItem[]) {
    this._myItems = value;

    if (!this._differ && value) {
        this._differ = this._iterableDiffers.find([]).create(null);
    }
    if (!this._differ2 && value) {
        this._differ2 = this._differs.find(this._myItems).create(null);
    }
}
get myItems() {
    return this._myItems;
}

constructor(private _iterableDiffers: IterableDiffers, private _differs: KeyValueDiffers, private _myService: MyService) {
    this.myItems = _myService.getItems();
}

ngDoCheck() {

    var changes = this._differ.diff(this._myItems);

    if (changes) {
        changes.forEachAddedItem((record) => {
            console.log('added ' + record.item);
        });
        changes.forEachRemovedItem((record) => {
            console.log('removed ' + record.item);
        });
    }

    var changes2 = this._differ2.diff(this._myItems);
    if (changes2) {
        changes2.forEachChangedItem(
            (record) => {
                    console.log(record.key + "," + record.currentValue);
                }
            });
    }
  }
}

It appears challenging to receive notifications for changes within a property of MyItem.

angular typescript

Answer 1

Answer №1

To effectively compare objects in a list, it's essential to assess the variances within each object, rather than just looking at the list as a whole. The KeyValueDiffer function should be used on individual objects, not on arrays.

One approach is to create an object that holds all the KeyValueDiffer instances for the elements in your array:

constructor(private differs:  KeyValueDiffers) {
}

ngOnInit() {
  this.objDiffer = {};
  this.list.forEach((elt) => {
    this.objDiffer[elt] = this.differs.find(elt).create(null);
  });
}

Then, during the ngDoCheck lifecycle hook, iterate through the differs to detect any changes within each item of the array:

ngDoCheck() {
  this.list.forEach(elt => {
    var objDiffer = this.objDiffer[elt];
    var objChanges = objDiffer.diff(elt);
    if (objChanges) {
      objChanges.forEachChangedItem((elt) => {
        if (elt.key === 'prop1') {
          this.doSomethingIfProp1Change();
        }
      });
    }
  });
}

You can view a working example on this plunkr: http://plnkr.co/edit/JV7xcMhAuupnSdwrd8XB?p=preview

It's worth noting that I didn't address the change detection for the entire array, but you can implement both strategies concurrently. Additionally, ensure to update the list of KeyValueDiffers when items are added or removed from the array.

Answer 2

To effectively compare objects in a list, it's essential to assess the variances within each object, rather than just looking at the list as a whole. The KeyValueDiffer function should be used on individual objects, not on arrays.

One approach is to create an object that holds all the KeyValueDiffer instances for the elements in your array:

constructor(private differs:  KeyValueDiffers) {
}

ngOnInit() {
  this.objDiffer = {};
  this.list.forEach((elt) => {
    this.objDiffer[elt] = this.differs.find(elt).create(null);
  });
}

Then, during the ngDoCheck lifecycle hook, iterate through the differs to detect any changes within each item of the array:

ngDoCheck() {
  this.list.forEach(elt => {
    var objDiffer = this.objDiffer[elt];
    var objChanges = objDiffer.diff(elt);
    if (objChanges) {
      objChanges.forEachChangedItem((elt) => {
        if (elt.key === 'prop1') {
          this.doSomethingIfProp1Change();
        }
      });
    }
  });
}

You can view a working example on this plunkr: http://plnkr.co/edit/JV7xcMhAuupnSdwrd8XB?p=preview

It's worth noting that I didn't address the change detection for the entire array, but you can implement both strategies concurrently. Additionally, ensure to update the list of KeyValueDiffers when items are added or removed from the array.

Answer 3

Answer №2

Inspired by Thierry Templiers response, I took his idea and tweaked it to suit my needs. Here is the solution I came up with:

Firstly, I had a private variable like this:

 private objDiffers: Array<KeyValueDiffer<string, any>>;

The goal was to monitor each element in an Array, specifically of type Array. So, my constructor ended up looking like this:

  constructor(
    private differs: KeyValueDiffers) {
    this.itemGroups = new Array<ItemGroup>();
    this.differ = this.differs.find(this.itemGroups).create();
  }

For ngOnInit method:

  public ngOnInit(): void {
    this.objDiffers = new Array<KeyValueDiffer<string, any>>();
    this.itemGroups.forEach((itemGroup, index) => {
      this.objDiffers[index] = this.differs.find(itemGroup).create();
    });
  }

and for ngDoCheck method:

ngDoCheck(): void {
    this.itemGroups.forEach((itemGroup, index) => {
      const objDiffer = this.objDiffers[index];
      const objChanges = objDiffer.diff(itemGroup);
      if (objChanges) {
        objChanges.forEachChangedItem((changedItem) => {
          console.log(changedItem.key);
        });
      }
    });
  }

With this setup, every time an item within the array undergoes a change, you will see a console log displaying the specific item and its altered property.

Answer 4

Inspired by Thierry Templiers response, I took his idea and tweaked it to suit my needs. Here is the solution I came up with:

Firstly, I had a private variable like this:

 private objDiffers: Array<KeyValueDiffer<string, any>>;

The goal was to monitor each element in an Array, specifically of type Array. So, my constructor ended up looking like this:

  constructor(
    private differs: KeyValueDiffers) {
    this.itemGroups = new Array<ItemGroup>();
    this.differ = this.differs.find(this.itemGroups).create();
  }

For ngOnInit method:

  public ngOnInit(): void {
    this.objDiffers = new Array<KeyValueDiffer<string, any>>();
    this.itemGroups.forEach((itemGroup, index) => {
      this.objDiffers[index] = this.differs.find(itemGroup).create();
    });
  }

and for ngDoCheck method:

ngDoCheck(): void {
    this.itemGroups.forEach((itemGroup, index) => {
      const objDiffer = this.objDiffers[index];
      const objChanges = objDiffer.diff(itemGroup);
      if (objChanges) {
        objChanges.forEachChangedItem((changedItem) => {
          console.log(changedItem.key);
        });
      }
    });
  }

With this setup, every time an item within the array undergoes a change, you will see a console log displaying the specific item and its altered property.

Monitoring modifications in elements within an array using Angular2

Answer №1

Answer №2

Similar questions

The variable 'string' has been declared, but it is never utilized or accessed

Tips for incorporating a child's cleaning tasks into the parent component

Unraveling the Perfect Jest Stack Trace

Encountered a Runtime Error: Uncaught promise rejection - couldn't locate removeView

What is the best way to retrieve the value from a chosen radio button?

Tips for preventing the overwriting of a JSON object in a React application

Leveraging Angular's capability to import files directly from the assets

The issue of NETWORK ERROR cannot be fixed through the use of axios

Best location to define numerous dialog components

Angular2: Property binding authorization is not implemented in any directive within an embedded template

Getter and setter methods in Angular Typescript are returning undefined values

What distinguishes between the methods of detecting falsy and truthy values?

Using TypeScript to call a class method from within another function

When attempting to update to Angular Material 8 using ng update, I ended up with @angular/* version ~9.0.0-next-0. Can anyone explain why there is this

Learn how to retrieve data from a parent component in Angular 8 by leveraging the window.opener property in a child window

Tips for accessing the Components.inputs array in Angular

Having issues with Angular http.post not sending data when using subscribe

The request to search for "aq" on localhost at port 8100 using Ionic 2 resulted in a 404 error, indicating that the

Preventing going back to a previous step or disabling a step within the CDK Stepper functionality

Confirm your identity without using a Single Sign-On (SSO) system