AngularJS NgOnInIt 方法在第二次使用路由器链接访问我的组件时丢失数据

Question

我有一个名为 edit-scrim 的组件，在我的组件内部，我有 2 个模型“Team”类型的数组，我正在使用导入到组件中的服务中的一些方法来为数组分配值。在我第一次访问该页面时，数组被填充得很好，但是如果我使用 router.navigate() 转到另一个页面并使用 routerlink 返回到“edit-scrim”，它会丢失其中一个数组的数据。我将数据分配给数组的所有功能都在 ngOnInit 内部，我在这个方法中做了一个 console.log("check") 来查看它是否在我每次访问组件时都被调用并且 它是 被叫，所以我不知道出了什么问题。

如果我刷新页面，数据会返回，但如果我再次通过路由器链接访问它，则不会

这些是我在 component.ts 文件中的数组

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

附件是我的 ngOnInIt 方法的代码 sn-p，我使用 routerlink 访问另一个页面并返回“edit-scrim”并且数据消失了。

 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

编辑 当我在我的 init 函数中执行此操作时，第一次访问我的页面时，它会控制台记录正确的数据，如果我转到另一个页面并返回此页面，它就会丢失。 ：/

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

EDIT 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);
    });
 });
}