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

Question

我试图使用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，但这似乎也没有用。

Answer 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)
        );
      }
    };