ID를 전달하고 angular2의 세부 정보를 표시하여 다음 페이지로 리디렉션하는 방법

Question

이와 같은 json 응답이 있습니다.

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

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

     }] 
    } 
    } 
} 

응답 데이터를 요청하고 있습니다. 나는 응답 데이터가있는 목록을 표시하는 html을 가지고있다. 내의 requirment IT는 routerLink에 내가이 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에 studentsNumber을 전달하고 있음을 다음 HTML하십시오 .FrontPage로 리디렉션해야 각 목록 항목의 클릭에

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

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

그리고 loadStudent에서 studentdetails.service.ts

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

에서

sDetails studentsNumber을 사용하여 perticular 학생의 세부 정보를 얻는 방법은 무엇입니까? 나는 이렇게하려고 노력하고있다. 그러나 다음 화면에서 나는 모든 학생의 세세한 부분에 대한 정보를 얻지 못했다. 누구나이 일을 도와 줄 수 있을까?

Answer 1

당신이 반복하고 당신의 HTML 내부 첫째, 몇 가지 잘못 했어, 당신은 다음과 같이 routerLink을 정의해야

HTML에게 studentdetails 구성 요소 내부

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

을, 당신 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]; 
}