如何同步角度2或4的生命周期钩和可观测值
如何同步角度2或4的生命周期钩和可观测值
提问于 2018-02-05 05:08:35
我想要同步我的角度2生命周期挂钩与可观察。例如，在下面的场景中。
**Temp Component**
@Component({
selector: 'temp-component',
template: `<table [tableData]='tableData'>
</table >`
})
export class TempComponent implements OnInit{
private data;
private tabledata;
ngOnInit {
this.getData(Dataurl).subscribe(
(data3: any) => {
this.data = data3;
},
(err: any) => {
console.error(err);
},
() => {
this.tabledata = this.data;
console.log('In temp component..', this.tabledata);
}
}
getData(url: string): Observable<any> {
return this.http.get(url)
.map((res: Response) => res.json())
.catch((err: Response) => Observable.throw(err.json().error));
}
}
**Table Component :**
@Component({
selector: 'table',
template: `code for displaying table`
})
export class TableComponent implements OnInit{
@Input tableData: any;
ngOnInit{
console.log('table Data..' , this.tableData);
}
}
**Output :**
table Data.. undefined
In temp component.. (Displaying table data info)在上面的场景中，我希望表数据与temp组件一样显示。一旦可观察的完成，谁能知道如何使表显示。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-05 05:33:14
您需要使用ngOnChange钩子，当组件的输入值发生变化时，角度调用此方法。我是说：
.....
export class TableComponent implements OnChanges {
@Input() tableData:any;
ngOnChanges(changes:SimplesChanges){
if(changes['tableData']){
console.log(this.tableData);
}
}希望能帮助你！
Stack Overflow用户
发布于 2018-02-05 22:58:52
您的代码没有什么问题，只是您没有实际显示数据，而且您从控制台日志中得到的信息是错误的，就像Nour在注释中所指出的那样。
如果将输入变量改为setter属性，则可以看到这一点。
@Component({
selector: 'table',
template: `<code>{{ tableData | json }}</code>`
})
export class TableComponent implements OnInit{
@Input() public set tableData(value: any) {
console.log('table data updated: ', value);
this._tableData = value;
}
public get tableData() {
return this._tableData;
}
private _tableData: any;
ngOnInit{
console.log('table Data..' , this.tableData);
}
}你现在应该看看你的
表Data..undefined
与以前一样，后续行动是
更新的表数据：{}
更新值时的文本。尝试在模板中显示数据，例如使用
<code>{{ tableData | json ]]</code>在更新值时，也可以在视图中查看。另外，请不要忘记绑定到的值应该是public，以便使aot编译工作，如果这是您感兴趣的特性的话。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48616175
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号