将对象数组用作子角度分量的模型，并注意更改

Question

I have a component that displays a list of items (objects). I want to create another component that receives this list as its model (or as a parameter) and creates a dashboard with this data. For example, I have a list of products, with quantity and price per unit, and want to display on the child component the total price.

By creating the component and passing the list to the child the total price is displayed correctly, however, when new items are added to the list, or when the quantity/price of an item is changed inside the list, my child component does not get triggered and does not updates it self.

I already tried to use ControlValueAccessor and OnChanges

Code on parent

<result [(ngModel)]="productList" [test]="armorList"></result>

Code on child - I know that using model and input might not be correct, I just tried both , sot sure which would be better.

import { Component, Input, OnChanges, Output, EventEmitter, forwardRef, SimpleChanges } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { Armor, Material } from "../armor-list.component";
import * as _ from "lodash";


@Component({
    selector: 'result',
    templateUrl: './result.component.html',
    styleUrls: ['./result.component.css'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ResultComponent),
            multi: true
        }
    ]
})
export class ResultComponent implements ControlValueAccessor, OnChanges {

    @Input() test: Product[];

    ngOnChanges(changes: SimpleChanges): void {
        console.log(changes);
    }

    writeValue(obj: any): void {
        if (obj !== undefined && obj !== null) {
           //logic to calculate the price
        }
    }
    registerOnChange(fn: any): void {
    }
    registerOnTouched(fn: any): void {
    }
}

Thanks

Answer 1

Angular detects changes in array and object by reference (not by value). Since you have just added an item to array, its reference stills remain same.

So to detect changes in array, you need to adopt either of the following strategies.

1. Use ngDoCheck lifecycle hook. See https://angular.io/guide/lifecycle-hooks .
2. Use slice method on input array. Whenever you are adding items to array, modify input array as let input = originalArray.slice(0). This will give you a new reference address which angular can detect.