Array - Changes do not propagate to child component

Question

The parent:

<div id="join-container">
  <join-chain 
    id="my-join-chain" 
    [selectedColumn]="selectedColumn"
    (updatedStatements)=onUpdatedStatements($event)>
  </join-chain>
  <tile-canvas 
    id="my-tile-canvas" 
    [mystatements]="theStatements"
    (selectedColumn)="onSelectedColumn($event)">
  </tile-canvas>
</div>

The parent's ts code:

  onUpdatedStatements(statements: Relational.JoinStatement[]) {
    this.theStatements = statements;
    console.log(">> fired from step-joining")
    console.log(this.theStatements)
  }

the child:

...
  mappings: Mapping[] = []
  @Input() set mystatements(someStatements: Relational.JoinStatement[] | undefined) {
    console.log(">> tile canvas interceptor")
    console.log(someStatements)
    if (someStatements !== undefined) {
      let idsFromStatements = someStatements
        .map(statement => [statement.leftTile, statement.rightTile])
        .filter(mapping => (mapping[0] !== undefined) && (mapping[1] !== undefined)) as ([Relational.tileId, Relational.tileId])[]
      this.mappings = idsFromStatements.map(ids => new Mapping(ids))
    }
  }

I see the message fired from step-joining appearing several times as I play with the app. On the other hand, >> tile canvas interceptor happens only one time, after the first fired from step-joining.

I read through several posts and have a similar pattern that works, that is the "interceptor" is triggered every time.

Please consider creating a StackBlitz. – SiddAjmera Aug 28 '18 at 14:18 — SiddAjmera, Aug 28 '18 at 14:18

score 2 · Accepted Answer · answered Aug 28 '18 at 13:57

2

In

onUpdatedStatements(statements: Relational.JoinStatement[]) {
this.theStatements = statements;
console.log(">> fired from step-joining")
console.log(this.theStatements)
}

If statements has the same reference and value as this.theStatements onChange will not be fired in child Component

answered Aug 28 '18 at 13:57

Ckram

586
4
14

From the `console.log` I see `theStatements` changing. Wondering if the fact that we have an array messes up things though. – NoIdeaHowToFixThis Aug 28 '18 at 14:02
2

Check this answer https://stackoverflow.com/questions/34796901/angular2-change-detection-ngonchanges-not-firing-for-nested-object – Ckram Aug 28 '18 at 14:05
Yes, I understand the issue now. How would you deal with the array of objects in order to trigger the change? Thanks! – NoIdeaHowToFixThis Aug 28 '18 at 14:20
@NoIdeaHowToFixThis - You can try `this.theStatements = statements.slice(0);`. That should create a duplicate of the source array. – ConnorsFan Aug 28 '18 at 15:27

Array - Changes do not propagate to child component

1 Answers1