ngOnInit() 并行运行方法？答案

【问题标题】：ngOnInit() runs methos parallel?ngOnInit() 并行运行方法？
【发布时间】：2017-10-24 20:59:41
【问题描述】：

在我的 Angular 项目中，我从 ngOnInit() 调用方法 ConnectToHueBridge() 和 listAllGoups()。在我看来，这两种方法都将并行执行。但我需要先运行ConnectToHueBridge()，然后运行listAllGoups()。我该怎么做？

var MyHue = new huepi();

@Component({

selector: 'my-app',
template: `
<h1>Hello {{name}}</h1>
<div>
  <ul>
    <li *ngFor="let group of lightgroups">
      {{group}}
    </li>
  </ul>
</div>
<Button (click)="listAllGroups()"> Get Groups</Button>`,
 })

export class AppComponent  {
  name = 'Angular';
  lightgroups: string[] = [];

constructor(){
}

ngOnInit(){
  this.ConnectToHueBridge(MyHue);
  this.listAllGroups();
}

listAllGroups(){
  for(var g in MyHue.Groups){
    this.lightgroups.push(g);
  }
  console.log("done loading groups");
}

 ConnectToHueBridge(MyHue:any){
 //do some stuff
 }
}
}

如果我单击按钮执行该方法，一切正常。我怎样才能一个接一个地执行这些方法？

【问题讨论】：

标签： angular ngoninit

【解决方案1】：

您必须使它们可观察。

ConnectToHueBridge(MyHue:any): Observable<any> {
    //do some stuff
    return Observable.of(true);
}

然后，在您的ngOnInit 中执行此操作

ngOnInit() {
    this.ConnectToHueBridge('xxx').subscribe(data => {
        // data = true, you can change it in your function
        this.listAllGroups();
    });
}

【讨论】：

这对我不起作用，仍然是同样的问题。我在ConnectToHueBridge() 方法中有一些console.log()，在listAllGroups() 方法中有一个console.log()，但是浏览器控制台中的输出是混合的。首先应该有来自connectToHueBridge() 的所有日志，然后是来自listAllGroups() 的所有日志，所以我知道数据已准备好在 HTML 中显示。如果我再次点击按钮执行listAllGroups()，数据将以 HTML 格式显示。
你还有什么想法吗？
我发现，MyHue对象在执行listAllGroups()的时候还没有准备好，所以它跳过了for循环，只显示了console.log()后的HTML显示和我再次点击按钮执行listAllGroups()，for循环运行，内容将显示在HTML中您还有其他想法解决这个问题吗？
对不起，我的国家母亲节，答复延迟。好吧，这似乎很明显：如果您的问题是 MyHue 对象，您不应该检查您是否有一个有效的对象吗？
感谢您的进一步帮助。好吧，我编辑了这部分：listAllGroups(){ console.log(MyHue.Groups); for(var g in MyHue.Groups){ //MyHue.Groups returns a array console.log(g); this.lightgroups.push(g); } console.log("done loading groups"); } 第一次 console.log(MyHue.Groups) 返回一个空数组。如果我再次手动执行它，它会提供我需要的元素。 MyHue 对象是使用其他 JS 库的实例声明的，如下所示：var MyHue:any = new huepi();