Ячейка Ag-grid не компилирует событие после добавления angularCompileRows: true

Я хочу использовать маршрутизацию в ячейке ag-grid. Я пробовал различные решения, такие как добавление "angularCompileRows: true" в gridOption, я дал тайм-аут для того же, но ни один из них не работал. Выдает ошибку «Невозможно прочитать свойство $ 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>

person Yashasvi    schedule 14.02.2017    source источник


Ответы (1)


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

пожалуйста, проверьте этот URL, надеюсь, он будет вам полезен.

person Rahul Gandhrokiya    schedule 14.02.2017