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

我有一个像这样的json响应。如何通过传递Id并在angular2中显示详细信息来重定向到下一页

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

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

     }] 
    } 
    } 
}

我做的请求获得响应数据。我有一个HTML我在哪里显示响应数据列表。我需求量的是各列表项的点击它应该重定向到下一个HTML page.For，在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; 
    }

在loadStudent sDetails我如何通过使用的学生号码来获取该学生的详细信息。我想这样做，但在下一个屏幕我得到所有的学生详细信息不是一个perticular学生的详细信息任何人都可以请帮助我如何做到这一点。

来源

2017-09-05 ananya

好，通过发送一个HTTP请求到您的API，将采取的ID在URL并将该学生作为JSON返回。 –

在这个回复中只有我有所有的细节数据。点击一个列表，我必须在下一页显示所有的细节数据。我在另一个屏幕上做了一个更多的api调用。@ JBNizet – ananya

*我可以再做一个api在下一个屏幕中调用*：为什么你不能？ –

你已经做了几件事情错了，首先你的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]; 
}

来源

2017-09-05 07:00:55

这不是工作，我得到这样的错误。错误：无法匹配任何路线。 URL段：@Wesley Coetzee – ananya

你可以添加你的路由模块，这样我就可以看到你的路由是如何建立的？ –

我正在里面loadStudentsDetails studentNumber（）method.Only的事情是我不能够获取基于studentNumber数据。这个。studentDetailsData = this.studentsData.filter（ob => ob.id === Number）; – ananya

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

回答

相关问题