4

在嘲笑了我发现的大多数例子之后，我被困住了。当我启动应用程序时，我得到的是： 网格输出

package.json 顺便说一句：

"ag-grid": "^15.0.0",
"ag-grid-angular": "^15.0.0",

创建了一个网格组件包装器（CS-Grid），我这样称呼它：

<cs-card card-title="Grid (Grid Component)">
  <section card-content>
    <cs-grid #AgGrid class="cs-sort-agrid cs-grid-table"
             [gridOptions]="gridOptions" 
             style="width: 900px; height: 115px;"></cs-grid>
  </section>
</cs-card>

CS-网格 HTML：

<ag-grid-angular #agGrid class="ag-fresh cs-grid-float" [gridOptions]="gridOptions"
[ngStyle]="{'height.px':height}">
</ag-grid-angular>

CS-网格 TS：

import { GridOptions } from 'ag-grid/main';
import { Component,Input,ViewChild } from '@angular/core';

    @Component({
      selector: 'cs-grid',
      templateUrl:'./grid.component.html',
      styleUrls: ['./grid.component.scss']
    })
    export class CSGridComponent {
       @Input('gridOptions') gridOptions;
       @Input('height') height=400; 
       @ViewChild('agGrid') gridElement;
       constructor(){
       }
       getNativeElement(){
         let nativeEle=this.gridElement._nativeElement;
         return nativeEle;
       }
    }

好的，工作在调用 CS-Grid 的应用程序中。HTML在上面......所以TS：

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { CSPageComponent } from '@CSWeb/CSUILibrary';
import { GridOptions } from 'ag-grid/main';
import { CSEventHubs, CSTabBarService } from '@CSWeb/MainService';
import { CSTagDef, CSTagPresentationDef, TagSelectorCategory, TagSelectorEntity } from '@CSWeb/Metadata';

@Component({
  selector: 'cs-elements-page',
  templateUrl: './elements-page.component.html',
  styleUrls: ['./elements-page.component.scss']
})
export class ElementsPageComponent extends CSPageComponent implements OnInit {
  gridOptions: GridOptions;
  columnDefs;
  rowData;
  gridApi: any;
  @ViewChild('AgGrid') gridElm;

  constructor() {
  }

  ngOnInit() {
    this.gridOptions = <GridOptions>{};
    this.gridOptions.onGridReady = (params) => {
      this.gridApi = params.api;
      this.initGrid();
    }
  }

  initGrid() {
    this.columnDefs = [
      { headerName: 'Make', field: 'make', minwidth: 100 },
      { headerName: 'Model', field: 'model', minwidth: 100 },
      { headerName: 'Price', field: 'price', minwidth: 100 },
    ];
    this.gridOptions.columnDefs = this.columnDefs;

    this.rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'F150', price: 55000 },
      { make: 'Toyota', model: 'RAV4', price: 35000 },
      { make: 'Chevrolet', model: 'Cheyene', price: 53000 },
      { make: 'Ford', model: 'Mondero', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 },
      { make: 'Honda', model: 'Hawk', price: 2000 },
      { make: 'Yamaha', model: '900', price: 3000 },
      { make: 'ToysRUs', model: 'Tricycle', price: 80 },
      { make: 'ToysRUs', model: 'RollerSkates', price: 30 }
    ];
    this.gridOptions.rowData = this.rowData;

    this.gridOptions.enableFilter = true;
    this.gridOptions.enableSorting = true;
    this.gridOptions.enableColResize = true;
    this.gridOptions.rowModelType = 'infinite';
    this.gridOptions.pagination = true;
    this.gridOptions.paginationPageSize = 20;
    this.gridOptions.cacheBlockSize = 20;
    this.gridOptions.rowHeight = 30;
    this.gridOptions.maxBlocksInCache = 1;
  }
}

我忍不住想我错过了一些简单的东西。有任何想法吗？

提前致谢！

4

1 回答 1

0

当我从 ag-grid 页面（ https://www.ag-grid.com/angular-grid/ ）复制以下片段时，它对我有用。我已经有了它，但无论如何我不得不更换它

将其复制到您的组件类中，即使它存在也要覆盖：

columnDefs = [
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

于 2020-05-13T03:15:00.213 回答