@ Input이 부모 구성 요소로부터 데이터를받지 못함

Question

방금 ​​@Input Angular의 기능을 사용하기 시작했습니다.이 시점까지는 모든 것이 지금까지 좋았습니다. 내 데이터베이스로 중포 기지를 사용하고 데이터의 청크 나는이

{ 
    "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" : {....} 
     } 
    } 
} 

같은 외모에 지금 바로 봉착하는 console.log() s를 questions 데이터를 읽을 수있는 아이 컴퍼넌트를 얻고있다 유일한 문제를 호출 해요 상위 구성 요소에서 완벽하게 잘됩니다. 이는 서비스 파일이이를 전달함을 의미합니다. 내가 어떻게 부르는거야.

부모 구성 요소

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 
    }); 

} 

심지어 그것을 자신의 전화에 대한 상위 구성 요소로 다시 가서 전화를했다

<business-image [busImageI]="busImageO" [busImageQuesI]="busImageQuesO"></business-image> 

하위 구성 요소

@Input('busImageI') 
busImage: FirebaseObjectObservable<any>; 

@Input('busImageQuesI') 
questions: FirebaseObjectObservable<any>; 

ngOnInit() { 
    console.log(this.questions);// doesn't return anything 
} 

부모 템플릿 이런 데이터베이스는

this._homeService.getBusImage().subscribe(BusImage => { 
     this.busImageQuesO = BusImage.questions; 
     console.log(this.busImageQuesO); 
    }); 

여전히 하위 구성 요소에는 차이가 없습니다. 다른 하나는 잘 작동하고있는 다른 요소들을 통해 다른 모든 것들도 잘 보여줍니다.

부모 구성 요소에서 하위 구성 요소를 가져오고 선언하는 것을 강조한 기사 및 자습서 중 일부를 보았습니다. 그러나 다른 구성 요소가 부모 구성 요소에서 선언 된 부분을 보았습니다. 기본 구성 요소가 연결된 상위 구성 요소는 설정 방법입니다. 이것이 차이를 만들지 모르겠다. 여러 개의 @Input을 가져 오는 다른 예제를 보았습니다. 나는 다른 것을하고있는 것을 보지 못합니다.

Answer 1

는 하위 구성 요소에 ngOnChanges()와 ngOnInit()을 변경하려고하고 OnChanges을 수입하고 구현하여 관련 기타 변경 사항을 잊지 마세요. 자세한 내용은 this 및 this을 확인하십시오.