Detecting changes in interrelated properties in angular 2-CodePudding

I have two public properties in my component.ts:

public hierarchicalData: object[] = [];
// Mapping TreeView fields property with data source properties
public field: Object = { dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };

These two properties are used to get data in Syncfusion.Angular.TreeView.

I have the following component.html:

<div >
    <ejs-treeview id="default" [fields]='field'></ejs-treeview>
</div>

I use the following function to fill data:

    readHierarchicalData(e: any): void {
        this.hierarchicalData = [
        {
             id: '01', name: 'Asset', expanded: true,
             subChild: [
             {
                 id: '01-01', name: 'Motor',
                 subChild: [
                     { id: '01-01-01', name: 'Shaft' },
                  ]
               },
            }
        ];
    }

This function is triggered by a button click event. The problem is that <ejs-treeview id="default" [fields]='field'></ejs-treeview> cannot get new data by running readHierarchicalData().

CodePudding user response：

I am assuming the change detection of ejs-treeview is OnPush, so it means you need to redefine your fields property to make it work.

eadHierarchicalData(e: any): void {
        this.hierarchicalData = [
        {
             id: '01', name: 'Asset', expanded: true,
             subChild: [
             {
                 id: '01-01', name: 'Motor',
                 subChild: [
                     { id: '01-01-01', name: 'Shaft' },
                  ]
               },
            }
        ];

       this.field = {...this.field, dataSource: this.hierarchicalData };
    }