无法读取属性 'setRowData' 的未定义/HTML 模板问题？

Question

我正在维护一个 AG-GRID 可重复使用的模板，其中包含所有必要的方法（清除文件管理器/CSV 下载/Autofit..等选项）--- 基本模板。我有另一个 AG-Grid 模板，它使用 "Base Template"（通过依赖注入）并根据 searchString 值用一行数据 填充网格。（下面的示例文件）

import { Component, OnInit, } from '@angular/core'; import { GridOptions, GridApi, } from "ag-grid-community"; import { ReportersgridComponent } from '../../commonpages/reportersgrid/reportersgrid.component' @Component({ selector: 'app-reporters', templateUrl: './reporters.component.html', styleUrls: ['./reporters.component.scss'] }) export class ReportersComponent implements OnInit { private reporterGrid: GridOptions; constructor(public reportersGrid: ReportersgridComponent, ) { this.reporterGrid = <GridOptions>{}; this.reporterGrid.enableSorting = true; this.reporterGrid.enableFilter = true; this.reporterGrid.enableColResize = true; this.reporterGrid.columnDefs = this.reportersGrid.createColumnDefs(); this.reporterGrid.rowData = this.reportersGrid.createRowData(); } ngOnInit() { } //Search Function performSearch() { let searchString = ""; this.populateFiteredReporter(searchString); // this.reporterGrid.api.setRowData(reporterGrid.rowData) } populateFiteredReporter(searchString) { this.reporterGrid.rowData = [ { fullName: 'fName,mName,lName2', address: "address2", country: "country2", postcode: "postcode2", phone: "phone", email: "email", qualification: "MBBS", institution: "institution", department: "department" }, ]; var str = JSON.stringify(this.reporterGrid.rowData); console.log('data:' + str); this.reporterGrid.api.setRowData(this.reporterGrid.rowData); //this.reportersGrid.populateFiteredReporter(searchString); } }

在上述文件的 HTML 中，我使用 "Base Template" s SELECTOR AS HTML TAG. (

<app-reportersgrid></app-reportersgrid>

) 显示网格部分。

上面给出了错误 -> 无法读取未定义的属性 'setRowData'。。

请注意，如果我将基本模板的选择器替换为基本模板的 ag-grid 的完整 HTML 部分（具有 (gridReady)="onGridReady($event)"），页面工作正常。

我能否获得帮助以坚持保持基本模板完好无损的最初想法？（请注意，所有基本模板功能，如导出到 csv、自动调整等都可以正常工作——这些功能与 OnGridReadty() 一起编码在基本模板中。）

提前致谢.. ASJ.

22/10/2019 /* reporters.component.html*/
的模板
<div> <div class="col-md-12"> <div class="card"> <div class="card-header text-uppercase font-weight-bold"> Search </div> <div class="card-body"> <div> <div class="row"> <div class="col-sm-4"> <div class="form-group"> <span>Name <i>(First/Middle/Last)</i></span> <input type="text" class="form-control" [(ngModel)]="reporterName"> </div> </div> </div> </div> </div> <div class="card-footer"> <div class="row"> <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> <button type="button" class="btn btn-normal btn-primary" (click)="performSearch()" style="width: 100px; ">Search</button> <button type="button" class="btn btn-normal btn-light" style="width: 100px;">Reset</button> </div> </div> </div> </div> </div> <app-reportersgrid></app-reportersgrid> </div>

基本模板 - HTML of the AG-GRID

<div class="centered-content"> <div> <ag-grid-angular #agGrid style="width: 100%; height: 358px;" class="ag-theme-balham" [gridOptions]="reporterGrid" [enableSorting]="true" enableFilter [sideBar]="sideBar" enableColResize [pagination]="true" [paginationPageSize]=10 rowDragManaged=true (gridReady)="onGridReady($event)"> <ag-grid-column headerName="Name" field="fullName"></ag-grid-column> <ag-grid-column headerName="Address" field="address" [width]="150"></ag-grid-column> <ag-grid-column headerName="Country" field="country"></ag-grid-column> <ag-grid-column headerName="Postcode" field="postCode"></ag-grid-column> <ag-grid-column headerName="Phone" field="phone"></ag-grid-column> <ag-grid-column headerName="Email" field="email"></ag-grid-column> <ag-grid-column headerName="Qualification" field="qualification"></ag-grid-column> <ag-grid-column headerName="Institution" field="institution"></ag-grid-column> <ag-grid-column headerName="Department" field="department" [cellRenderer]="countryCellRenderer"> </ag-grid-column> </ag-grid-angular> </div> </div>

/ReportersGridcomponent.ts 文件/

import { Component, OnInit } from '@angular/core'; //import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import {GridOptions, GridApi, Grid} from "ag-grid-community"; @Component({ selector: 'app-reportersgrid', templateUrl: './reportersgrid.component.html', styleUrls: ['./reportersgrid.component.scss'] }) export class ReportersgridComponent implements OnInit { private reporterGrid: GridOptions; private gridApi:GridApi; private gridColumnApi; filterName: string | null; constructor( ) { this.reporterGrid = <GridOptions>{}; this.reporterGrid.enableSorting = true; this.reporterGrid.enableFilter = true; this.reporterGrid.enableColResize = true; this.reporterGrid.columnDefs = this.createColumnDefs(); this.reporterGrid.rowData = this.createRowData(); } ngOnInit() { } createColumnDefs() { this.reporterGrid.columnDefs = [ { headerName: "Name", field: "fullName", width:100, }, { headerName: "Address", field: "address", }, { headerName: "Country", field: "country", }, { headerName: "Postcode", field: "postCode", }, { headerName: "Phone", field: "phone", }, { headerName: "Email", field: "email", }, { headerName: "Qualification", field: "qualification", }, { headerName: "Institution", field: "institution", }, { headerName: "Department", field: "department", } ]; return this.reporterGrid.columnDefs } createRowData(){ this.reporterGrid.rowData = [ // {fullName: 'fName,mName,lName',address:"address1",country: "country",postcode: "postcode",phone: "phone",email:"email",qualification:"MBBS",institution:"institution",department:"department"}, ]; return this.reporterGrid.rowData; } onGridReady(params) { this.gridApi = params.api; this.gridColumnApi = params.columnApi; this.autoSizeAll() } autoSizeAll() { var allColumnIds = []; this.gridColumnApi.getAllColumns().forEach(function(column) { allColumnIds.push(column.colId); }); this.gridColumnApi.autoSizeColumns(allColumnIds); } onCSVExport() { this.reporterGrid.api.exportDataAsCsv(); } onSearchTextChange(newData: string) { this.reporterGrid.api.setQuickFilter(newData); } clearFilters() { if (this.gridApi.isQuickFilterPresent()) { this.gridApi.setQuickFilter(''); this.filterName=""; } } // populateFiteredReporter(searchString){ // this.reporterGrid.rowData = [ // {fullName: 'fName,mName,lName2',address:"address2",country: "country2",postcode: "postcode2",phone: "phone",email:"email",qualification:"MBBS",institution:"institution",department:"department"}, // ]; // var str= JSON.stringify(this.reporterGrid.rowData); // console.log('data:'+str); // this.reporterGrid.api.setRowData(this.reporterGrid.rowData); // //return this.reporterGrid.rowData; // } }

Answer 1

您需要做的第一件事是将您的网格组件设置为接受来自其父级的网格选项：

@Input() public reporterGrid: GridOptions;

这是您的网格组件的缩略版。我建议使用属性或字段，而不是使用方法来创建行和列。只是一个建议。

export class ReportersgridComponent implements OnInit {
    @Input() public reporterGrid: GridOptions;
    private columnDefs = [
        // put your column def json here
    ];

    private rowDefs = [
        // Put your row def json here
    ];

    constructor() {
    }

    ngOnInit() {
        this.reporterGrid.columnDefs = this.columnDefs;
        this.reporterGrid.rowData = this.rowDefs;
    }

    // rest of your file
}

您的记者组件 ts 文件应如下所示：

export class ReportersComponent implements OnInit {

    private reporterGridOptions: GridOptions;

    constructor() {
        this.reporterGridOptions = {
            enableSorting: true,
            enableFilter: true,
            enableColResize: true,
        };
    }

    ngOnInit() {
    }
 // other code...
}

在你的 reporter 组件 html 中，你需要像这样通过元素传递这个值：

<app-reportersgrid [reporterGrid]="reporterGridOptions"></app-reportersgrid>

另一个建议，我会花一些时间来正确命名、调整大小写和格式化您的代码以使其更易于阅读。我希望这可以帮助您朝着正确的方向前进。基本上你想将你的选项对象传递给网格组件，这样它就可以访问它。

此外，您不想通过构造函数注入组件。它不会与模板中的组件实例相同。组件在渲染和从视图中移除时被初始化和销毁，并且不像服务那样作为单例存在。

无法读取 属性 'setRowData' 的未定义/HTML 模板问题？

Cannot read property 'setRowData' of undefined / Issue with HTML template?

ag-grid-angular

22/10/2019 /* reporters.component.html*/

无法读取属性 'setRowData' 的未定义/HTML 模板问题？