CODEWITHSUNDEEP
angulartypescript
NoIdeaHowToFixThis
NoIdeaHowToFixThis

Reputation: 4574

Array - Changes do not propagate to child component

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.

Upvotes: 1

Views: 1050

Answers (1)

Ckram
Ckram

Reputation: 586

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

Upvotes: 2

Related Questions