Question

使用所有必要的方法（清除文件管理器/ CSV下载/Autofit..etc选项）维护AG-GRID可重用模板-基本模板。我还有另一个AG-Grid模板，该模板使用“基础模板”（通过依赖项注入），并根据查询字符串值用一行数据填充网格。（下面的示例文件）

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中，我正在使用“基本模板”的 SELECTOR AS HTML标记。（

<app-reportersgrid></app-reportersgrid>

）以显示网格部分。

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

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

我能否获得帮助以保持原来的基本模板不变的想法？（请注意，所有基本模板功能（如导出到csv，自动调整等）都可以正常工作-这些功能与OnGridReadty（）一起编码在基本模板中。）

在此先感谢.. ASJ。

22/10/2019 / * reports.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>

基本模板-AG-GRID的HTML

<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...
}

在您的报告程序组件html中，您需要通过以下元素传递该值：

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

另一个建议，我将花一些时间来正确命名事物，调整大小写并设置代码格式，以便于阅读。我希望这有助于您朝正确的方向前进。基本上，您希望将选项对象传递给网格组件，以便它可以访问它。

此外，您也不想通过构造函数注入组件。它与模板中的组件不会是同一实例。组件在呈现和从视图中移除时被初始化和销毁，并且不像服务类那样以单例形式存在。

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

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

1 个答案: