One issue arises where the property passed to the view child appears as undefined:
Parent Component:
@Component({
selector: 'app-searchbox',
template: `
<app-artifact-list [artifacts]="searchResults"></app-artifact-list>
`
})
export class SearchboxComponent implements OnInit {
// Initialize the property explicitly
// Same effect as initializing in constructor
searchResults: Artifact[] = [new Artifact()];
constructor(private artifactService: ArtifactService) {
}
ngOnInit(): void {
this.pollService(this.artifactService.findByQuery('guice'));
}
private pollService(request: Observable<Artifact[]>) {
return request.subscribe(this.fillInResults);
}
private fillInResults(result: Artifact[]) {
result.forEach(console.log);
for (let obj of result) {
// Issue when trying to push into undefined this.searchResults
this.searchResults.push(obj);
}
}
}
Child Component:
@Component({
selector: 'app-artifact-list',
template: `
<h1>{{_artifacts | json}}</h1>
`
})
export class ArtifactListComponent implements OnChanges {
private _artifacts: Artifact[] = [];
ngOnChanges(changes: SimpleChanges): void {
console.log('Property changed');
}
@Input()
set artifacts(artifacts: Artifact[]) {
console.error('Property changed');
this._artifacts = artifacts;
}
}
Initially, during the constructor call, the property initializes correctly but becomes undefined in the callback method.
Could this be somehow linked to this? Maybe this.searchResults references something else in the callback?