angular - 在 Angular 5 中的 ngoninit 之后如何运行函数
问题描述
这是关于生命周期钩子的。我的要求是在页面初始化后运行一个函数是后台。我用过 ngAfterViewInit()。但它不等待从 ngoninit() 中找到的数组。
export class Parent2Component implements OnInit , DoCheck {
constructor(private getHTTP: HttpCallService) { }
eventResults: any;
apiParam: any = ['posts', 'albums', 'comments', 'photos', 'users',
'todos', 'posts', 'albums', 'comments', 'photos', 'users', 'todos',
'posts', 'albums', 'comments', 'photos', 'users', 'todos', 'posts',
'albums', 'comments', 'photos', 'users', 'todos'];
resultArray: any = [];
finalArray: any = [];
displayedColumns: string[] = ['resourceId'];
finalObject: any = [];
demoObject: any = [];
getCatagory(index) {
this.demoObject = this.demoData.resources.webcast[index];
console.log('this.demoObject' , this.demoObject);
}
getEventsData() {
for (let index = 0; index < this.apiParam.length; index++) {
this.getHTTP.getData('https://jsonplaceholder.typicode.com/' +
this.apiParam[index])
.subscribe((response) => {
this.eventResults = response;
console.log('All Data of ' + this.apiParam[index] + 'is ' +
this.eventResults);
});
}
}
getDemo() {
this.demoObject = this.demoData.resources.webcast[0];
this.getHTTP
.getData('https://jsonplaceholder.typicode.com/posts' )
.subscribe((respData) => {
console.log('================Resp init====================');
console.log(respData);
});
}
getObs() {
const apiRoot = 'https://jsonplaceholder.typicode.com/';
const urls = [];
for (let i = 0; i < this.apiParam.length; i++) {
urls.push(apiRoot + this.apiParam[i]);
}
of(...urls).pipe(
concatMap((url: string) => this.getHTTP.getData(url)))
.subscribe((result) => {
this.resultArray.push(result);
// console.log('this.resultArray', this.resultArray);
if (this.resultArray.length === this.apiParam.length) {
for (let index = 0; index < this.resultArray.length; index++) {
// console.log(this.apiParam[index]);
this.finalObject = { [this.apiParam[index]]:
this.resultArray[index] };
this.finalArray.push(this.finalObject);
}
}
});
console.log('========this.finalArray============================');
console.log(this.finalArray);
// console.log('====================================');
}
ngOnInit() {
console.log('ONinit');
this.getDemo();
}
ngDoCheck() {
console.log('AfterONinit');
this.getObs();
}
}
- 如果我使用 ngDocheck() 代码进入无限循环。ngViewinit 不适合这种情况。帮帮我
解决方案
如我所见,您需要从 ngonit 调用的 getDemo 成功/完成并调用 getObs()。只需在 getDemo 的成功回调中调用 getObs:-
getDemo() {
this.demoObject = this.demoData.resources.webcast[0];
this.getHTTP
.getData('https://jsonplaceholder.typicode.com/posts' )
.subscribe((respData) => {
console.log('================Resp init====================');
console.log(respData);
this.getObs(); // Add this here and you will get your expected behaviour of getting the result array before calling getObs
});
}
推荐阅读
- mysql - 无法使用 jdbc 和 spark 连接器从 databricks 集群连接到 Azure 数据库 for MySQL 服务器
- google-sheets - 使用 Google 表格组合/改进公式
- vscode-settings - VScode settings.json 显示错误“预期文件结尾”
- javascript - 如何为 p5.js 金字塔使用嵌套循环?
- c# - 条码阅读器的 WPF 桌面应用程序
- python - 为什么我会收到此“input_shape 错误”?(蟒蛇喀拉斯)
- javascript - 使用 Jquery Full Calender 获取今天的日期
- zeromq - 如何在 ZMQ Publisher/Subscriber QUEUE 中获取消息/事件计数
- java - 编写一个测试类,测试java.lang.String类中的以下方法:length ,charAt ,substring ,indexOf
- git - .gitignore add .env.development 没用?