Question

我有两个组件，在第一个组件中，我有一个数组输入

第一个组成部分是：

@Input('data')
    set ungroupedData(ungroupedData: any[]) {
        this._ungroupedData = null;
        this.groupedData = [];
        this._ungroupedData = ungroupedData;
        this.columnManager = [];
        this.cdr.detectChanges();

        if (ungroupedData) {
            this.jsonKeys = Object.keys(this.ungroupedData[0]);
            let groupBy: string = this.jsonKeys[0] ? this.jsonKeys[0] : "";

            if (this.groupingColumn && this.groupingColumn.length > 0) {
                groupBy = this.groupingColumn;
            }

            this.groupedData = this.groupStructural(groupBy, this.ungroupedData);
            this.groupKeys = Object.keys(this.groupedData);

            // Fill columnContainer
            for (var groupKey of this.groupKeys) {
                var x: ColumnContainer = new ColumnContainer();

                x.add([{
                    jsonKey: this.displayColumn,
                    name: groupKey,
                    width: 90,
                    type: EColumnType.text,
                    clickable: EColumnClickable.clickable,
                    routerURL: '/bulletin-officiel/access-chronologique/detail/',
                    routerKey: 'tid',
                    sortable: false,
                    order: 0
                },
                {
                    jsonKey: "pdf",
                    name: "PDF",
                    width: 10,
                    type: EColumnType.icon,
                    clickable: EColumnClickable.clickable,
                    imageURL: "/assets/projets/images/pdf.png",
                    sortable: false,
                    order: 1
                }]);

                this.columnManager.push(x);
            }
        } else {
            this._ungroupedData = null;
        }
        this.cdr.detectChanges();
    }

    @Input('groupBy') groupingColumn: string;
    @Input('display') displayColumn: string;

    private _groupedData: any;
    public get groupedData() {
        return this._groupedData
    };
    public set groupedData(newData: any) {
        this._groupedData = [];
        this.cdr.detectChanges();   
        this._groupedData = newData;
    }
    public jsonKeys: string[];
    public groupKeys: string[];

    private columnManager: ColumnContainer[];

    constructor(private cdr: ChangeDetectorRef) {
        this.columnManager = [];
    }

从第二个组件的角度来看，我叫第一个组件，并将数据传递给它。

<app-dynamic-tree [data]="data" groupBy="label" display="ttitreLFr"></app-dynamic-tree>
<div style="position: fixed; top: 50%; right: 50%">
    <ngx-spinner bdColor="trasparent"
                 size="medium"
                 color="#2288bd"
                 type="ball-clip-rotate"></ngx-spinner>
</div>

Api被调用了，但是第一个组件的视图没有更新。我不知道问题的根源到底是什么。我想知道是否有解决方案？非常感谢。

Angular 6-子组件的视图不更新

0 个答案: