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

Posted 2023-03-13

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

【英文标题】：AngularJS NgOnInIt method losing data on the second visit to my component using router-link

【发布时间】：2018-03-05 20:20:23

【问题描述】：

我有一个名为 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);
        );
      );

【问题讨论】：

您似乎在每次调用时都在重新初始化第二个数组：myTeams: Team[] = [];

如果我做 myTeams[]: Team[]; -> 这给出了错误 can't push into undefined 或 myTeams[] = new Array 它仍然不起作用。我能做什么？

您可以像这样对原始数组使用过滤器：this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser)。

我忘了说你需要 ES6，如果你使用的是 ES5，你可以像这样使用它： this.myTeams = this.teams.filter(function (team) return team.createdBy == this.loggedInUser;

我必须在数组初始化中更改任何内容吗？我也应该在我将团队订阅到 this.teams 后立即执行此功能还是在该订阅功能之外执行此功能？

【参考方案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);
    );
 );

【讨论】：

你能检查编辑吗，谢谢 - 我的列表是空的，控制台中没有错误日志

现在检查一下，我搞砸了右括号。