2017-05-24 55 views
0

在我的Angular項目中,我從ngOnInit()調用方法ConnectToHueBridge()listAllGoups()。在我看來,這兩種方法將並行執行。但我需要先運行ConnectToHueBridge(),然後運行listAllGoups()。我怎樣才能做到這一點?ngOnInit()運行methos並行嗎?

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

如果我點擊按鈕執行該方法一切工作正常。 如何在彼此之後執行方法?

回答

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(); 
    }); 
} 
+0

這並沒有爲我工作,還是同樣的問題。我在'ConnectToHueBridge()'方法中有一些console.log(),在'listAllGroups()'方法中有一個console.log(),但瀏覽器控制檯中的輸出是混合的。首先應該有'connectToHueBridge()'的所有日誌,然後全部來自'listAllGroups()',所以我知道數據已經準備好在HTML中顯示它。如果我點擊按鈕再次執行'listAllGroups()',數據將以HTML格式顯示。 – WeSt

+0

你有其他想法嗎? – WeSt

+0

我發現,當執行'listAllGroups()'時''MyHue'對象沒有準備好,所以它跳過了for循環,只顯示console.log() 顯示HTML並點擊按鈕要再次執行'listAllGroups()',for循環會運行並且內容將顯示在HTML中您有任何其他想法來解決這個問題嗎? – WeSt