angular - Angular，ag-grid 在我可以设置行数据之前获取数据

Question

我有一个全局变量，可以获取用户当前的时间段，他们从导航栏中的下拉菜单中设置。当我去取它时，在我调用 Observable 之前，它失败了，并说时间段未定义。这只发生在大约 10% 的时间里。我添加了 setTimeOut() 函数以便它可以等待，它确实减少了它，但我觉得有更好的方法不会影响性能。任何帮助，将不胜感激。

AG-GRID 代码：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { ExecutiveProjectSummary } from '../../models/executive.model';
import { ExecutiveService } from '../../services/executive.service';
import { PersonsService } from '../../services/persons.service';

import { AppGlobals } from '../../services/app.globals';
import { DateFilter } from 'ag-grid';
import { DatePipe } from '@angular/common';
import { AppModule } from '../app.module';
import { AgDateComponent } from '../ag-components/ag-date.component'
import { AgCurrencyComponent } from '../ag-components/ag-currency.component'
import { environment } from '../../../environments/environment';


@Component({
  selector: 'app-executive',
  templateUrl: './executive.component.html',
  styleUrls: ['./executive.component.css']
})
export class ExecutiveComponent implements OnInit {

  public timeperiod: string;
  public format: string;
  public searchGrid: string;
  public isExpanded = false;
  public selectedCols: any;
  private projweightedpercentage: number;
  private projectsummary: ExecutiveProjectSummary[];

  public rowData= [];
  public executiveCols: any;

  public executiveColsHours;
  public executiveColsDollars;
  private gridApi;
  private gridColumnApi;
  public rowSelection;


  constructor(private executiveService: ExecutiveService, private globals: AppGlobals, private personService: PersonsService, private router: Router) {
    this.executiveColsHours = [
      { field: 'projectName', headerName: 'Program', width: 270 },
      { field: 'PM', headerName: 'Project Manager', width: 150 },
      {
        field: 'projectStartDate', headerName: 'Start Date', width: 100, maxWidth: 120,
    // instead of cellRenderer we use cellRendererFramework
        cellRendererFramework: AgDateComponent
      },
      { field: 'bacHours', headerName: 'Budget', width: 95, maxWidth: 110,     valueFormatter: this.numberFormatter },
      { field: 'actHours', headerName: 'Actuals', width: 95, maxWidth: 110, valueFormatter: this.numberFormatter },
      { field: 'etcHours', headerName: 'ETC', width: 95, maxWidth: 110, valueFormatter: this.numberFormatter },
      { field: 'eacHours', headerName: 'EAC', width: 95, maxWidth: 110, valueFormatter: this.numberFormatter },
      {
        field: 'percentcomplete', headerName: 'Percent Complete', width: 150,
        cellRenderer: this.percentCellRenderer
    // cellRenderer: function (params) {
    //   return params.value + '% <progress value="' + params.value + '" style="width:80px" max="100"></progress>';
    // }
      },
      {
        field: 'vacHours', headerName: 'VAC', width: 90, maxWidth: 100, valueFormatter: this.numberFormatter,
        cellStyle: function (params) {
          return params.value > 0 ? { backgroundColor: '#984f4d' } : { backgroundColor: '#539166' }
        }
      },
      {
        field: 'evDollars', headerName: '$EV', width: 115, maxWidth: 120,
        valueFormatter: this.currencyFormatter,
        //cellRendererFramework: AgCurrencyComponent
      },
      { field: 'spiDollars', headerName: 'SPI', width: 60, maxWidth: 90, valueFormatter: this.floatFormatter },
      { field: 'cpiDollars', headerName: 'CPI', width: 60, maxWidth: 90, valueFormatter: this.floatFormatter }
    ];

    this.executiveColsDollars = [
      { field: 'projectName', headerName: 'Program', width: 270 },
      { field: 'PM', headerName: 'Project Manager', width: 150 },
      { field: 'projectStartDate', headerName: 'Start Date', width: 100, maxWidth: 120, cellRendererFramework: AgDateComponent },
      { field: 'bacDollars', headerName: '$Budget', width: 95, maxWidth: 110, valueFormatter: this.currencyFormatter },
      { field: 'actDollars', headerName: '$Actuals', width: 95, maxWidth: 110, valueFormatter: this.currencyFormatter },
      { field: 'etcDollars', headerName: '$ETC', width: 95, maxWidth: 110, valueFormatter: this.currencyFormatter },
      { field: 'eacDollars', headerName: '$EAC', width: 95, maxWidth: 110, valueFormatter: this.currencyFormatter },
      {
        field: 'percentcomplete', headerName: 'Percent Complete', width: 150,
        cellRenderer: this.percentCellRenderer
    // cellRenderer: function (params) {
    //   return params.value + '% <progress value="' + params.value + '" max="100"></progress>';
    // }
      },
      {
        field: 'vacDollars', headerName: '$VAC', width: 90, maxWidth: 100,
        cellStyle: function (params) {
          return params.value > 0 ? { backgroundColor: '#984f4d' } : { backgroundColor: '#539166' }
        },
        valueFormatter: this.currencyFormatter
      },
      { field: 'evDollars', headerName: '$EV', width: 115, maxWidth: 120, valueFormatter: this.currencyFormatter},
      { field: 'spiDollars', headerName: 'SPI', width: 60, maxWidth: 90 },
      { field: 'cpiDollars', headerName: 'CPI', width: 60, maxWidth: 90 }
    ];

    this.rowSelection = "single";
  }

  ngOnInit() {

  }

  onSelectionChanged(params){
    var selectedRows = this.gridApi.getSelectedRows();
    var selectedRowsString = "";
    selectedRows.forEach(function(selectedRow, index) {
      if (index !== 0) {
        selectedRowsString += ", ";
      }
      selectedRowsString += selectedRow.projectId;
    });
    console.log(selectedRowsString.trim());
    this.router.navigate(['/executiveproject', selectedRowsString.trim()]);
  }
onGridReady(params) {  
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi; 
  //Get the users prefrence, works fine.
  this.personService.getCurrency().subscribe(data => {
    this.format = data;
    if (this.format == "hours") {
      this.executiveCols = this.executiveColsHours;
    }
    else {
      this.executiveCols = this.executiveColsDollars
    }
  });  

  //fails to catch it 10% of the time
  if(this.timeperiod == undefined){ 
    this.timeperiod = this.globals.timeperiod;
  }
  //still doesn't set it to 'REAL-TIME'
  else{
    this.timeperiod = "REAL-TIME";
  }

  console.log(this.timeperiod);

  this.executiveService.getExecutiveSummary(this.timeperiod)
    .subscribe(data => {
      this.rowData = this.fixData(data);

      //setting data before fixData() even finishes
      setTimeout( () => {
        params.api.setRowData(this.rowData);
      }, 700);
    });
}

全球的：

import { Injectable } from '@angular/core';
import { SnapShotList } from '../models/globals.model';
import { Person } from '../models/persons.model';

@Injectable()
export class AppGlobals {
    public timeperiod:string;
    public snapshotlist: SnapShotList[] = [];
    public employee: Person;
}

标签： angularag-gridredux-observable