I get data from an API Call that I already managed to display in a table. Now, when you click on some Item of the table I want to show a more detailled view of this item.
So when I open the link localhost:4200/detail/12 I want to display data from the object with the id=12. But I cannot figure out how to do this.
I currently get the id of the selected person like this from the people.component.html
...
<tr *ngFor="let data of data" routerLink="/detail/{{data.person_id}}">
<td>{{data.person_id}}</td>
<td>{{data.name}}</td>
</tr>
...
The data of the API is in JSON format:
[{"person_id":"1","name":"Tom"},{"person_id":"2","name":"Clarissa"},{"person_id":"4","name":"Micky"},...]
but the displayed (in the Browser) data is logged as JavaScript Objects:
0:
person_id: 1
name: "Tom"
2:
person_id: 2
name: "Clarissa"
3:
person_id: 4
name: "Micky"
...
So how do I have to adapt the people-detail.component.ts and people-detail.component.html to display just the data of the selected Item (eg with the person_id=12) instead of all the items (that is what happens currently)?
This is how my people-detail.component.ts currently looks like
...
export class PeopleDetailComponent implements OnInit {
public data: any = []
constructor(
public http: HttpClient,
private route: ActivatedRoute) { }
getData(){
const person_id = +this.route.snapshot.paramMap.get('person_id');
const url ='http://localhost:4000/api/allpeople'
this.http.get(url).subscribe
(data => this.data = data);
}
ngOnInit() : void{
this.getData()
}
and this is my current people-detail.component.html:
<div *ngFor="let data of data">
<div>
<span>id1: </span>
{{data.regulation_id}}
</div>
</div>
I would go with using a resolver.
First declare the route of the detailed view:
const routes: Routes = [
{
path: 'detail/:id',
component: PersonComponent,
resolve: { message: PersonResolver }
}
];
You can use the resolver wherever you want to get a person details (reusable way to get data before loading the component
Then create the resolver on the route:
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { of } from "rxjs";
import { delay } from "rxjs/operators";
@Injectable()
export class PersonResolver implements Resolve<Person> {
constructor(private route: ActivatedRoute) {
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
const id = route.paramMap.get('id');
const url = 'your url here';
return this.http.get(url);
}
}
You can also take a look at this for selecting inline stackblitz
You must create interface for data:
export interface iUsers {
person_id: string;
name: string;
}
then you must change your code to:
public data: iUsers[] = []
this.http.get<iUsers[]>(url).subscribe((res)=>{
this.data = res
console.log(this.data)
})
setup an click listener as follow.
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of data" (click)="onClickHandler(data.person_id)">
<td>{{data.person_id}}</td>
<td>{{data.name}}</td>
</tr>
</tbody>
</table>
this will pass the id of selected item into the handler method.the object havid the selected id will be stored in the "selected" variable.
onClickHandler(id)
{
this.selected=this.data.find(item=>{
if(item['id']===id)
{
return true;
}
return false;
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.