如何使用Angular 6在单个组件中渲染多个ag网格

我在html页面中有多个ag网格，我想在组件中获得ag网格的特定行值

html

在这里，我试图获得两个ag网格行的值，但我得到：

错误类型错误：无法读取未定义错误的属性“api”

完成Ag网格设置

我已经试过用下面的代码，以正确的方式绑定网格

在HTML文件中

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady1($event)"
>
</ag-grid-angular>

我能够在

onSelectionChanged（）

方法中获得网格的两个值

这是输出屏幕

希望这对你有帮助

如果您对以上内容有任何问题，请告诉我

---

谢谢

您的代码看起来不错。您刚才输入了一个错误：将

@ViewChild（'agGrid'）…

替换为

@ViewChild（'agGrid1'…

因为这是您在HTML模板中输入的名称。

Hi@Zameer，请查看StackOverflow指南。在当前状态下，您的问题将被关闭。请插入您尝试过的代码，预期的结果和实际发生的情况。如果有错误日志，请将其包括在内。可能会添加一个错误日志可生产链接到？这是否回答了您的问题？不，它没有解决问题Hi kushal，感谢您的回复，我将尝试更新您。

  @ViewChild('agGrid1', { static: true }) agGrid: AgGridAngular;
  @ViewChild('agGrid2', { static: true }) agGrid2: AgGridAngular;

  getRowsData() {

      this.selectedRows1 = this.agGrid.api.getSelectedRows();
      this.selectedRows2 = this.agGrid2.api.getSelectedRows();
     console.log( this.selectedRows1,  this.selectedRows2)

  }  

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady1($event)"
>
</ag-grid-angular>

private gridApi;
  private gridColumnApi;
  private gridApi1;
  private gridColumnApi1;
  rowSelection = "single";
  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 }
  ];
  onSelectionChanged() {
    var selectedRows = this.gridApi.getSelectedRows();
    var selectedRows1 = this.gridApi1.getSelectedRows();
    console.log(selectedRows);
    console.log(selectedRows1);
  }
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
  onGridReady1(params) {
    this.gridApi1 = params.api;
    this.gridColumnApi1 = params.columnApi;
  }