When comparing lists using an extension method that calls a comparer, I encountered an error. Here is the code snippet:
type HasDiff<T> = (object: T, row: any) => boolean;
export const isListEqualToRows = <T>(objects: T[], rows: any[], hasDiffFunction: HasDiff<T>): boolean => {
if (objects.length !== rows.length)
return true;
return rows.every((row, index) => {
const object = objects[index];
if (row.isNew) {
return false;
}
return !hasDiffFunction(object, row);
});
};
The comparison is triggered by Angular's value changes in a ReactiveForm. Here is how it's implemented:
import { isListEqualToRows } from '@core/helpers';
formGroup.valueChanges.pipe(debounceTime(debounceValue)).subscribe((changes) => {
this.areChangesDetected = !isListEqualToRows<Person>(this.items, changes, this.hasDiff);
});
My issue arises when dealing with a list within a list for one object. To handle this, I am attempting to call the isListEqualToRows() method again inside:
hasDiff(item: Person, row: any): boolean {
return item.description !== row.description
|| !isListEqualToRows<Address>(item.addresses, row.addresses, this.hasDiffAddress);
}
hasDiffAddress(item: Address, row: any): boolean {
return item.AddressId !== row.id
|| item.AddressStreet !== row.street;
}
However, running the second line of the hasDiff() method triggers an error:
Cannot read properties of undefined (reading 'hasDiffAddress')
How can I resolve this issue?