AG_Grid，Angular-Apollo，来自 Apollo 查询的数据无法为网格生成行数据答案

【问题标题】：AG_Grid, Angular-Apollo, data from Apollo query fails to generate rowdata for gridAG_Grid，Angular-Apollo，来自 Apollo 查询的数据无法为网格生成行数据
【发布时间】：2019-09-19 16:04:36
【问题描述】：

我正在尝试使用 Angular 服务通过 Apollo 进行查询，并使用该数据在我的 ag-grid 中生成行。然而，即使我得到一个 Observable，网格也不会产生行。我对所有这些技术都是新手，老实说，我担心我写了一堆乱码。

files.service.ts

import fileListQuery from '../queries/fileListQuery';
import { File } from 'sherlock';

@Injectable({
  providedIn: 'root'
})
export class FilesService {

constructor(private apollo: Apollo) { }

getAllFiles() {
  return this.apollo.watchQuery<File>({
    query: fileListQuery
  })
    .valueChanges
    .pipe(
      map(results => results.data)
    )
  }
}

table.component.ts

import { Component, Input, OnInit } from '@angular/core';
import {GridOptions} from "ag-grid-community";

import { FilesService } from '../files.service';

@Component({...})
export class TableComponent implements OnInit {
  private gridOptions: GridOptions;

  filter= 'All';

  @Input() initialRowData;

  constructor(private filesService: FilesService) {

    // calling service function here
    this.initialRowData = this.filesService.getAllFiles();

    this.gridOptions = <GridOptions>{...};

    this.gridOptions.columnDefs = [
      {headerName: 'Status', field: 'status.name', sortable: true, filter: true, headerCheckboxSelection: true, checkboxSelection: true},
      {headerName: 'FileName', field: 'filename', sortable: true, filter: true},
      {headerName: 'Delivered', field: 'deliveryDate', sortable: true, filter: true},
    ];

    this.gridOptions.rowData = this.initialRowData; // data should go here
    }
  }

types.ts

export type File = {
    id: string,
    filename: string,
    extension?: string,
    path?: string,
    deliveryDate?: string,
    status: Status
}

最初我调用了服务函数 OnInit，但这似乎也不起作用。

【问题讨论】：

标签： angular ag-grid apollo

【解决方案1】：

解决了！我必须添加 subcribe 和一些像这样的 Grid Api 事件：

export class TableComponent implements OnInit {
  private gridOptions: GridOptions;
  private initialRowData$;

  filter= 'All';

  constructor(private filesService: FilesService) {

    this.initialRowData$ = this.filesService.getAllFiles();

    this.gridOptions = <GridOptions>{
      floatingFilter: true,
      rowSelection: 'multiple',
      rowClassRules: {...},
      isExternalFilterPresent:  this.isExternalFilterPresent.bind(this),
      doesExternalFilterPass: this.doesExternalFilterPass.bind(this),

      onGridReady: () => {
        this.initialRowData$.subscribe(
          rowData => this.gridOptions.api.setRowData(rowData.files)
        );
      }
    };

【讨论】：