adding new optional property in to an existing object does not bind this new property to @input property of the component

Question

I am at first creating an instance of a object

    export interface IContent {
      type: string;
      name: string;
      color?: string;
      text?: Array<string>;
      xStream?: IValueStream;
      svgType?: string;
      placement?: boolean;
    }

    export interface ITablist {
      id: string;
      text: string;
      content: Array<IContent>;
    }

class something {
tabList: Array<ITablist> = [
        {
      id: 'large_marker',
      text: 'Markers',
      content: [
        { type: 'large_marker', name: 'R', text: ['X:', 'Y:'], svgType: 'r' },
        { type: 'large_marker', name: '1', text: ['X:', 'Y:'], svgType: '1' },
        { type: 'large_marker', name: '2', text: ['X:', 'Y:'], svgType: '2' }
      ]
    }
}

Now after some click event I want to add a property xStreamto existing tablist

fillMarkerXData(xData: Array<IValueStream>, xDataDiff: Array<IValueStream>): void {
    if (xData) {
      this.tabList[0].content[0].xStream = xData[0];
      this.tabList[0].content[1].xStream =
        this.placement1 ? xDataDiff[1] : xData[1];
      this.tabList[0].content[2].xStream =
        this.placement2 ? xDataDiff[2] : xData[2];
    }
  }

but this does not bind it to @input property to child component

.html

  <div *ngFor="let length of tabList[0].content; let i = index;">
        <marker [valueStream]="tabList[0].content[i].xStream"></marker>
    </div>

Here xstream is not upating in child component after the click event. do someone know how I can achieve this Thanx in advance

Can you try using `changeDetectorRef.detectChanges()` after modifying your data? — Roberto Zvjerković, Sep 27 '18 at 14:21
Possible duplicate of [Angular2 change detection: ngOnChanges not firing for nested object](https://stackoverflow.com/questions/34796901/angular2-change-detection-ngonchanges-not-firing-for-nested-object) — Amit Chigadani, Sep 27 '18 at 15:10

score 0 · Answer 1 · answered Sep 27 '18 at 15:14

This should fix it:

In your HTML you are iterating over tabList[0] with *ngFor but in the click event handler you are changing values in tabList[1]

My initial answer:

You might try using lodash cloneDeep:

https://lodash.com/docs/4.17.10#cloneDeep

I think it may not be detecting changes where the object reference has not changed. lodash cloneDeep will ensure that it creates a clone of the object thereby changing the object reference and thus forcing change detection to kick in:

fillMarkerXData(xData: Array<IValueStream>, xDataDiff: Array<IValueStream>): void {
  if (xData) {
    this.tabList[1].content[0].xStream = cloneDeep(xData[0]);
    this.tabList[1].content[1].xStream =
      cloneDeep(this.placement1 ? xDataDiff[1] : xData[1]);
    this.tabList[1].content[2].xStream =
      cloneDeep(this.placement2 ? xDataDiff[2] : xData[2]);
  }
}

adding new optional property in to an existing object does not bind this new property to @input property of the component

1 Answers1