Question

我有一个名为edit-scrim的组件，在我的组件中我有两个类型为model＆＃34; Team＆＃34;的数组，我使用的一些方法导入到组件中为数组赋值。在我第一次访问页面时，阵列正在填充，但如果我使用router.navigate（）转到另一个页面并回到＆＃34; edit-scrim＆＃34;使用routerlink它会丢失1个数组的数据。将数据分配给数组的所有功能都在ngOnInit中，我在这个方法中做了一个console.log（＆＃34;检查＆＃34;），看看每次访问组件时是否都被调用这是被叫，所以我不确定是什么问题。

如果我刷新我的页面数据会回来，但如果我再次通过routerlink访问它，则

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

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

附件是我的ngOnInIt方法的代码片段，我使用routerlink访问另一个页面并回到＆＃34; edit-scrim＆＃34;数据消失了。

 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函数中执行此操作时，第一次访问我的页面时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 - ＆gt;没有用这种方式工作：/也许我搞砸了语法？

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

AngularJS NgOnInIt方法使用router-link在第二次访问我的组件时丢失数据

1 个答案: