Currently, I am fetching data from a service within the app component and passing it down to a child component using @Input. Oddly enough, when I log the data in ngOnInit, it appears correctly in the child component. However, when I try to assign it to a variable and utilize it in the child template, it returns as undefined, leaving me puzzled about the cause.
In my app.component.ts file, this is where I invoke my service and encounter issues with the data stored in 'colorCounts'. Inside the ngOnInit function, logging confirms the correct data. The colorCounts object has properties for red, yellow, and green:
ngOnInit() {
this.pciService.getPciInfo()
.subscribe((pciInfo) => {
this.spinner.hide();
this.pciData = pciInfo.sorted,
this.colorCounts = pciInfo.counts;
});
Below is the snippet from app.component.html where the data is passed down:
<app-navbar *ngIf="colorCounts" [colorCounts] = "colorCounts"></app-navbar>
<app-system-status [pciData]="pciData"></app-system-status>
In the child component, while I can successfully capture the data by console.log in ngOnInit, attempting to access "red" in the template or store it in the class results in being undefined:
constructor(private pciService: PciService,
public dialog: MatDialog,
private decimalPipe: DecimalPipe) { }
AMVersion: any;
@Input() colorCounts: Colors;
openDialog(): void {
let dialogRef = this.dialog.open(AmVersionDialogComponent, {
panelClass: 'custom-dialog-container',
data: {}
});
(<AmVersionDialogComponent>dialogRef.componentInstance).AMVersion = this.AMVersion;
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
ngOnInit() {
this.pciService.getAMVersion()
.subscribe((AMInfo) => {
return this.AMVersion = AMInfo;
});
var red = this.colorCounts.red;
console.log(red)
console.log(this.colorCounts);
}
}
It seems like there might be something straightforward that I'm overlooking in terms of the life cycle. Any guidance on how to address this issue would be greatly appreciated.