У меня есть глобальная переменная, которая получает текущий период времени пользователя, который они устанавливают из выпадающего списка в панели навигации.Когда я отправляюсь за ним, прежде чем я вызову 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);
});
}
Global:
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;
}