agGrid + Angular:在自定义可扩展单元格中请求后刷新单元格

时间:2018-05-08 08:41:29

标签: angularjs ag-grid ag-grid-ng2

我在请求进入自定义可扩展单元组件后刷新数据单元时出现问题:

HTML:

<ag-grid-table [options]="optionsOrgViewRoutingRules"></ag-grid-table>

TS:

public optionsOrgViewRoutingRules: any = <any>{
    icons: {
        groupExpanded: '<i class="mdi mdi-arrow-expand mdi-24px" />',
        groupContracted: '<i style="color: #428bca" class="mdi mdi-arrow-expand mdi-24px" />',
    },
    rememberGroupStateWhenNewData: true,
    detailCellRenderer: 'myDetailCellRenderer',
    masterDetail: true,
    frameworkComponents: {
        myDetailCellRenderer: RoutingRulesExpandableRowComponent, //CUSTOM COMPONENT
    },
    deltaRowDataMode: true,
    getRowNodeId: (data: any): any => {
        return data.id;
    },
    suppressCellSelection: true,
    suppressContextMenu: true,
    columnDefs: [
        {
            headerName: this.localization.getValue('orgViewer.tab.routingRules.ruleType'),
            hide: false,
            field: 'ruleType',
            cellClass: 'applyInheritedRowStyleToSpecificRowCells',
            suppressContextMenu: false,
            type: ['stringColumnSenderProcessingReceiver'],
        },
        {
            headerName: this.localization.getValue('orgViewer.tab.routingRules.ruleName'),
            hide: false,
            field: 'ruleName',
            cellClass: 'applyInheritedRowStyleToSpecificRowCells',
            cellRenderer: 'agGroupCellRenderer',
        },
    ],
    rowData: [],
    rowSelection: 'single',
    context: { componentParent: this },
};

自定义可扩展组件:

HTML:

<table class="audit-activity-table">
    <tr *ngFor="let specification of specifications">
        <td>{{specification.type}}</td>
        <td>{{specification.specification}}</td>
        <td>{{specification.value}}</td>
        <td>{{specification.operator}}</td>
    </tr>
</table>

TS:

导出类RoutingRulesExpandableRowComponent实现ICellRendererAngularComp {

public specifications: any; // TODO: need interface
public actions: any; // TODO: need interface
public params: any;

public agInit(params: any): void {


    const orgId: number = params.data.currentOrganizationId;
    const ruleId: number = params.data.id;

    this.rulesService
        .getRule(orgId, ruleId)
        .subscribe((data: any) => {

            this.specifications = data.specifications;
            this.actions = data.actions;

            // PLACE TO REFRESH CELL

        });

}

public refresh(params: any): boolean {
    return false;
}

constructor(
    public rulesService: RulesService,
) { }

}

点击展开图标后,我只看到没有数据的表格标题。 但是在鼠标移动后,会出现数据。 WTF?

如何一次显示数据?我知道api.refreshCells(cellRefreshParams)但我怎么能用它?

0 个答案:

没有答案