Question

我想在ag-grid单元格中使用路由。我尝试了各种解决方案，比如在gridOption中添加“angularCompileRows：true”，我已经给出了相同的超时但没有一个正常工作。它给'无法读取属性'$ apply'of undefined'错误。

我的maincomponent.ts文件。

private gridOptions: GridOptions;
public showGrid: boolean;
private columnDefs: any[];
public rowCount: string;
properties: ViewPropertyModel[] = []; 

ngAfterViewChecked() {
    this.gridOptions.api.sizeColumnsToFit();
}

ngOnInit() {
    this.gridOptions = <GridOptions>{
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        rowModelType: "pagination",
        paginationPageSize: 10,
        angularCompileRows: true
    };

    this.createColumnDefs();
    this.getProperties();
}

constructor(
    public router: Router,
    private service: SharedContents,
    private _propertyServices: PropertyServices) {
    this.service.setData('page-wrapper', true);
}

getProperties() {

        this._propertyServices.getPropertyList()
            .subscribe(properties => {
                var self = this;
                if (properties.status == "success") {
                    this.properties = properties.data;
                    let dataSource = {
                        propertyList: this.properties,
                        rowCount: this.properties.length,
                        getRows: function (params: any) {
                            var lastRow = -1;
                            var pageRows = this.propertyList.slice(params.startRow, params.endRow);
                            if (this.propertyList.length <= params.endRow)
                                lastRow = this.propertyList.length;
                            params.successCallback(pageRows, lastRow);
                        }
                    }
                    this.gridOptions.api.setDatasource(dataSource);
                }
            });
    }

createColumnDefs() {

    this.columnDefs = [
        { headerName: "Property Name", field: "property_name" },

        {
            headerName: "Actions", field: "status",
            cellRenderer: function (params) {
                return "<a [routerLink]='['../editproperty']' title='Edit Property'><i class='md-icon fa fa-edit'></i></a>" +
                    "<a (click)='openArchiveModal()' title= 'Delete' > <i class='md-icon fa fa-trash' > </i></a>";
            }
        }
    ];
}

html页面。

<ag-grid-ng2 #agGrid style="width: 100%; height: 450px;" class="ag-bootstrap"
                                     [gridOptions]="gridOptions"
                                     [columnDefs]="columnDefs"
                                     enableColResize
                                     enableSorting
                                     enableFilter
                                     toolPanelSuppressGroups
                                     toolPanelSuppressValues
                                     debug
                                     rowHeight="35">

                        </ag-grid-ng2>

Answer 1

http://www.flyingtophat.co.uk/blog/2016/02/19/workaround-for-angular2-event-binding-in-ag-grid-cell-templates.html

请检查此网址，我希望它对您有用。

添加“angularCompileRows：true”后，Ag-grid单元格不会编译事件

1 个答案: