@Input未从父组件接收数据

Opt*_*tiq 2 typescript angular2-inputs angular

我刚刚开始使用@InputAngular 的功能,到目前为止一切都很好。我使用 Firebase 作为数据库,我调用的数据块如下所示

{
    "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"    : {....}
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

我现在遇到的唯一问题是让子组件读取父组件中完全正常的questions数据console.log(),这意味着服务文件正在传递它。这就是我调用它的方式。

父组件

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

}
Run Code Online (Sandbox Code Playgroud)

父模板

<business-image [busImageI]="busImageO" [busImageQuesI]="busImageQuesO"></business-image>
Run Code Online (Sandbox Code Playgroud)

子组件

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

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

ngOnInit() {
    console.log(this.questions);// doesn't return anything
}
Run Code Online (Sandbox Code Playgroud)

我什至回到父组件并在它自己的数据库调用中调用它,如下所示

this._homeService.getBusImage().subscribe(BusImage => {
        this.busImageQuesO = BusImage.questions;
        console.log(this.busImageQuesO);
    });
Run Code Online (Sandbox Code Playgroud)

它对子组件仍然没有影响。通过我一直在研究的其他元素,另一个和所有其他元素一样显示得很好。

我在我遇到的一些文章和教程中看到,他们强调在父组件中导入和声明子组件,但我也看到其他人只是在主模块中声明子组件组件已链接到,这就是我的设置方式。我不知道这是否有影响。我见过导入多个@Inputs 的其他示例,但我看不出我在做什么不同。

sel*_* mn 6

尝试在子组件中ngOnInit()进行更改,并且不要忘记通过导入和实现它来进行相关的其他更改。欲了解更多信息,请查看ngOnChanges() OnChanges

  • 发生这种情况是因为在您的服务 Observable 返回结果之前调用了 child 的 ngOnInit 。这是 Observables 的主要思想,脚本执行在等待结果之前不会被阻止。即事件是这样的:父 `ngOnInit` -&gt; 子 `ngOnInit` -&gt; 服务返回结果 -&gt; 它已被分配给父变量 -&gt; 它已被分配给子变量 (2认同)