angular - @Input tar inte emot data från föräldrakomponenten
Jag har precis börjat arbeta med @Input-funktionen i Angular och allt har varit bra hittills fram till denna punkt. Jag använder Firebase som min databas och den bit av data jag hämtar ser ut så här
{
"page_area_business_image" : {
"expand" : {
"intro" : "some info...",
"title" : "a title"
},
"rebrand" : {....},
"newbrand" : {....},
"questions" : {
"question01" : {
"id" : "an ID",
"name" : "a name",
"question" : "a question",
"answers" : {
"answer01" : {
"answer" : "some answer",
"id" : "an ID"
},
"answer02" : {
"answer" : "another answer",
"id" : "an ID"
}
}
},
"question02" : {....},
"question03" : {....}
}
}
}
Det enda problemet jag har just nu är att få barnkomponenten att läsa questions-data som console.log()-as perfekt i föräldrakomponenten, vilket betyder att tjänstefilen levererar den. Här är hur jag anropar den.
Föräldrakomponent
private busExpInformation: FirebaseObjectObservable<any>;
private busImageO: FirebaseObjectObservable<any>;
private busImageQuesO: FirebaseObjectObservable<any>;
constructor(private _homeService: HomeService) { }
ngOnInit() {
this._homeService.getBusExpInformation().subscribe(BusExpInformation =>{
this.busExpInformation = BusExpInformation;
});
this._homeService.getBusImage().subscribe(BusImage => {
this.busImageO = BusImage.expand;
this.busImageQuesO = BusImage.questions;
console.log(this.busImageQuesO); //works fine here
});
}
Föräldramall
<business-image [busImageI]="busImageO" [busImageQuesI]="busImageQuesO"></business-image>
Barnkomponent
@Input('busImageI')
busImage: FirebaseObjectObservable<any>;
@Input('busImageQuesI')
questions: FirebaseObjectObservable<any>;
ngOnInit() {
console.log(this.questions);// doesn't return anything
}
Jag gick till och med tillbaka till föräldrakomponenten och gjorde ett anrop för det i dess eget anrop till databasen så här
this._homeService.getBusImage().subscribe(BusImage => {
this.busImageQuesO = BusImage.questions;
console.log(this.busImageQuesO);
});
och det gjorde fortfarande ingen skillnad i barnkomponenten. Den andra visas också fint liksom alla de andra genom andra element jag har arbetat med.
Jag har sett i några av artiklarna och handledningarna jag har stött på att de betonar att importera och deklarera barnkomponenten i föräldrakomponenten, men jag har sett andra där de bara arbetar med att den deklareras i huvudmodulen som föräldrakomponenten är kopplad till, vilket är hur jag har det inställt. Jag vet inte om detta gör någon skillnad eller inte. Jag har sett andra exempel på att importera flera @Input:s och jag förstår inte vad jag gör annorlunda.
Svar #1
försök att ändra ngOnInit() till ngOnChanges() i barnkomponenten, och glöm inte de relevanta andra ändringarna genom att importera OnChanges och implementera det. För ytterligare information, se detta.