Angular ngOnInit（）并行运行吗？

在我的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
 }
}
}

var MyHue=new huepi（）；
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}


{{group}}


获取组“，
})
导出类AppComponent{
名称='角度'；
光组：字符串[]=[]；
构造函数（）{
}
恩戈尼尼特（）{
这个。连接到Huebridge（MyHue）；
这个.listAllGroups（）；
}
listAllGroups（）{
for（MyHue.Groups中的变量g）{
这个。光组。推（g）；
}
控制台日志（“完成加载组”）；
}
连接到Huebridge（MyHue:any）{
//做点什么
}
}
}

如果我点击按钮来执行这个方法，一切都很好。

---

如何在每个方法之后执行它们？

您必须使它们可见

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

---

这对我不起作用，还是一样的问题。我在

ConnectToHueBridge（）

方法中有一些console.log（），在

listAllGroups（）

方法中有一个console.log（），但浏览器控制台中的输出是混合的。首先应该有来自

connectToHueBridge（）

的所有日志，然后是来自

listalgroups（）

的所有日志，因此我知道数据已经准备好在HTML中显示。如果我再次点击按钮执行

listAllGroups（）

，数据将以HTML格式显示。你还有其他想法吗？我发现执行

listAllGroups（）

时，

MyHue

对象还没有准备好，因此它跳过for循环，只显示console.log（）在HTML显示后，我再次点击按钮执行

listAllGroups（）

，for循环运行，内容将显示在HTML中。您还有其他解决方法吗？很抱歉，回答延迟，我国的母亲节。很明显：如果你的问题是MyHue对象，你不应该检查你是否有一个有效的对象吗？谢谢你进一步的帮助。我编辑了这部分：

listAllGroups（）{console.log（MyHue.Groups）；for（MyHue.Groups中的var g）{//MyHue.Groups返回一个数组console.log（g）；this.lightgroups.push（g）；}console.log（“完成加载组”）；}

第一次console.log（MyHue.Groups）返回一个空数组。如果我再次手动执行它，它将提供我需要的元素。MyHue对象是用另一个JS库的实例声明的，如下所示：

var MyHue:any=new huepi（）
ngOnInit() {
    this.ConnectToHueBridge('xxx').subscribe(data => {
        // data = true, you can change it in your function
        this.listAllGroups();
    });
}