Angular deepCloned child component Input cannot be changed on UI-CodePudding

I have parent and child component. In parent component there is BehaviourSubject<SomeObject[]>().

export interface SomeObject(){
field: number;
...
editable: boolean
}

I cannot pass whole object to child component, I have to filter that before so input value look like this:

childInputData = parentBehaviourSubject.value.filter(x=>...);

On UI in child component I have icon edit which is visible if field editable = false, and after click on this icon it changed editable = true and enable some field to edit. My problem is that I want to pass cloned array as child input. When I changed

childInputData = _.cloneDeep(parentBehaviourSubject.value.filter(x=>...));

UI edit icon stop reacting on any click. And I really don't know why. What am I missing?

CodePudding user response：

Why exactly are you calling filter(...) on an object? This function is used for arrays. If you call .value on the behaviorsubject you are basically taking the current value of this object and ignore values, which will be emitted in the future.

If you want to pass the current value to the child component everytime you should pipe your value and subscribe to it (using async pipe).

The following code creates an observable of a copy of each emitted value from parentBehaviourSubject:

childInputData$ = parentBehaviourSubject.pipe(map( val => _.cloneDeep(val) );

And in your HTML you can use the following code to pass this value to your child:

<child-component [childData]="childInputData$ | async">
...