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

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

1 个答案: