Question

我有这样的json响应。

{
  "response": {
    "data": {
      "students": [{
        "studentsNumber": "123",
        "studentsName": "ABC"

      }, {
        "studentsNumber": "345",
        "studentsName": "CDS"

      }]
    }
  }
}

我正在请求获取响应数据。我有一个html，我在其中显示响应数据列表。我的要求是点击它应该重定向到下一个html页面的每个列表项。对于在routerLink中的那个我传递的studentsNumber就像这样 students.component.html

<div *ngFor="let student of studentsData" routerLink="/studentdetails/:{{student.studentsNumber}}" routerLinkActive="active">
      <div>{{student.studentsNumber}}</div>
      <div>{{student.studentsName}}</div>
</div>

并在studentdetails.component.ts

中

constructor(route:ActivatedRoute) {
      this.stuID = route.snapshot.params['studentsNumber'];
  }

   ngOnInit(){
        this.studentdetailsData = this.studentdetailsService.loadStudentsDetails(this.stuID);
        }

并在studentdetails.service.ts

 loadStudentsDetails(studentNumber:number){
         this.studentDetailsData= this.studentsData.filter(ob => ob.id===Number);
       return this.studentDetailsData;
   }

在 loadStudentsDetails 中，如何使用 studentsNumber 获取特定学生的详细信息。我正在尝试这样但是在下一个屏幕中，我得到的所有学生细节都不是一个特定的学生细节谁能帮助我如何做到这一点。

Answer 1

您做错了一些事情，首先在您循环的HTML中，您需要按如下方式定义routerLink：

HTML

<div *ngFor="let student of studentsData" routerLink="['/studentdetails/', student.studentsNumber]" routerLinkActive="active">
      <div>{{student.studentsNumber}}</div>
      <div>{{student.studentsName}}</div>
</div>

在studentdetails组件中，您需要通过ActivatedRoute模块获取号码，等待订阅操作，然后只调用获取详细信息，请参阅下文：

studentdetails.component.ts

ngOnInit(): void {
    this.route.params
        .subscribe((params: any) => {
            this.stuID = params['id'] //not sure what your id is called here, it's defined in your route
            this.studentdetailsData = this.studentdetailsService.loadStudentsDetails(this.stuID);
        });
}

您的服务，您需要通过添加[0]来选择第一项，它应如下所示：

loadStudentsDetails(studentNumber:number){
    return this.studentsData.filter(ob => ob.id === Number)[0];
}

如何通过传递Id并在angular2中显示详细信息来重定向到下一页

1 个答案: