AngularJS NgOnInIt方法使用路由器鏈接第二次訪問我的組件時丟失數據

Question

我有一個名爲edit-scrim的組件，並且在我的組件中我有2個類型模型「Team」的數組，我正在使用服務中的一些方法我導入到組件中以將值分配給數組。在我第一次訪問這個頁面時，數組被填充得很好，但是如果我使用router.navigate（）轉到另一個頁面並使用routerlink回滾到「edit-scrim」，它會丟失數組中的數據。我給數組分配數據的所有功能都在ngOnInit中，我在這個方法內部完成了一個console.log（「check」），看看它是否每次訪問該組件時都會被調用，因此我會調用它我不確定什麼是錯的。

如果我刷新我的網頁數據回來，但如果我再次訪問它通過routerlink它不

這些都是我的陣列在component.ts文件

teams: Team[]; 
myTeams: Team[] = []; 

附是我的ngOnInIt方法的代碼片段，我使用routerlink訪問另一個頁面並回到「編輯 - 稀鬆平衡」並且數據不見了。

ngOnInit() { 
console.log("check"); 
this.myinit(); 

} 

myinit() { 



this.authService.getAuth().subscribe(auth => { 
    if (auth) { 
    this.loggedInUser = auth.email; 
    } else { 

    } 
}); 

this.teamService.getTeams().subscribe(teams => { 
    this.teams = teams; 
    console.log(this.teams); 
    for (var i = 0; i < this.teams.length; i++) { 
    if (this.teams[i].createdBy == this.loggedInUser) { 
     this.myTeams.push(this.teams[i]); 
    } 
    } 

}); 

console.log(this.myTeams); 


this.id = this.route.snapshot.params['id']; 

//Get Team 
this.scrimService.getScrim(this.id).subscribe(scrim => { 
    this.scrim = scrim; 
}); 


} 

console.log info after visiting the page twice

編輯 當我這樣做我的初始化函數，我第一次訪問我的網頁它console.logs正確的數據，如果我去到另一個網頁，回來裏面這，它是失去了。 ：/

this.teamService.getTeams().subscribe(teams => { 
    this.teams = teams; 
    console.log(this.teams); 

    // this.myTeams = this.teams.filter(function (team) { return 
    team.createdBy == this.loggedInUser; }); 
    this.myTeams = this.teams.filter(team => team.createdBy == 
    this.loggedInUser) 
    console.log(this.myTeams); 


    }); 

EDIT2

this.authService.getAuth().subscribe(auth => { 
     if (auth) { 
     this.loggedInUser = auth.email; 
     this.teamService.getTeams().subscribe(teams => { 
     this.teams = teams; 
     console.log(this.teams); 

    //this.myTeams = this.teams.filter(function (team) { return team.createdBy == this.loggedInUser; }); 
    this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser) 
    console.log(this.myTeams); 


    }); 
     } else { 

     } 
    }); 

EDIT3 - >沒有以這種方式工作：/也許我搞砸了語法？

this.authService.getAuth().subscribe(auth => { 
     if (auth) { 
     this.loggedInUser = auth.email; 
     } 
    }, 
     error => { console.log(error) }, 
    () => { 
     this.teamService.getTeams().subscribe(teams => { 
      this.teams = teams; 
      this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser); 
      console.log(this.teams); 
      console.log(this.myTeams); 
     }); 
     }); 

編輯4 - 沒有工作，它甚至沒有讓在做的console.log

this.authService.getAuth().subscribe(auth => { 
     if (auth) { 
     this.loggedInUser = auth.email; 
     } 
    }, 
     error => { console.log(error) }, 
    () => { 
     this.teamService.getTeams().subscribe(teams => { 
      this.teams = teams; 
      this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser); 
      console.log(this.teams); 
      console.log(this.myTeams); 
     }); 
     }); 

Answer 1

你的團隊服務調用的階段是依賴於身份驗證成功完成服務電話，所以你需要「鏈接」在一起。做到這一點最簡單的方法是把在第一認購的代碼塊，只有當成功執行調用運行第二個電話：

.subscribe(
    function(response) { //code that handles response }, 
    function(error) { // error handling }, 
    function() { // code that runs after completion } 
); 

所以你的情況，你就會有這樣的事情：

myinit() { 
    this.authService.getAuth().subscribe((auth) => { 
     if (auth) { 
      this.loggedInUser = auth.email; 
     } 
    }, 
    (error) => { console.log(error); }, 
    () => { 
      this.teamService.getTeams().subscribe(teams => { 
      this.teams = teams; 
      this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser); 
    }); 
}); 
}