Как отобразить один объект JavaScript / элемент JSON из API Call - PullRequest
Новая
       73

Как отобразить один объект JavaScript / элемент JSON из API Call

1 голос
/ 28 октября 2019

Я получаю данные от вызова API, которые мне уже удалось отобразить в таблице. Теперь, когда вы нажимаете на какой-либо элемент таблицы, я хочу показать более детальный вид этого элемента.

Поэтому, когда я открываю ссылку localhost: 4200 / detail / 12, я хочу отобразить данные из объекта с id = 12. Но я не могу понять, как это сделать.

В настоящее время я получаю идентификатор выбранного человека, подобный этому, от people.component.html 

...
        <tr *ngFor="let data of data" routerLink="/detail/{{data.person_id}}">
            <td>{{data.person_id}}</td>
            <td>{{data.name}}</td>
        </tr>
...

Данные API представлены в формате JSON: 

[{"person_id":"1","name":"Tom"},{"person_id":"2","name":"Clarissa"},{"person_id":"4","name":"Micky"},...]

, но отображаемые (в браузере) данные регистрируются как объекты JavaScript: 

0:
   person_id: 1
   name: "Tom"
2:
   person_id: 2
   name: "Clarissa"
3:
   person_id: 4
   name: "Micky"
...

Итак, как мне адаптировать people-detail.component.ts и people-detail.component.html котображать только данные выбранного элемента (например, с person_id = 12) вместо всех элементов (то, что происходит в настоящее время)?

Вот так выглядит мой people-detail.component.ts в настоящее время 

...
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()
  }

и это мой текущий people-detail.component.html: 

<div *ngFor="let data of data">
    <div>
        <span>id1: </span>
        {{data.regulation_id}}
    </div>
</div>

Ответы [ 3 ]

1 голос
/ 28 октября 2019

настроить прослушиватель щелчков следующим образом. 

    <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>

это передаст идентификатор выбранного элемента в метод обработчика. Объект с выбранным идентификатором будет сохранен в переменной selected («)». 

onClickHandler(id)
{
    this.selected=this.data.find(item=>{
    if(item['id']===id)
    {
        return true;
    }
    return false;
});
}
1 голос
/ 28 октября 2019

Я хотел бы использовать распознаватель.

Маршрутизация

Сначала объявить маршрут детального просмотра: 

const routes: Routes = [
  {
    path: 'detail/:id',
    component: PersonComponent,
    resolve: { message: PersonResolver }
  }
];

Резолвер

Выможно использовать распознаватель везде, где вы хотите получить сведения о человеке (многоразовый способ получения данных перед загрузкой компонента

Затем создайте распознаватель на маршруте: 

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

}

Дополнительные сведения

  • Я предполагаю, что вам нужно создать PersonComponent с информацией о человеке, к которой можно перейти после того, как вы щелкнете по человеку.
  • Я предполагаю, что вы хотите показывать подробности о другом компоненте по мере продвиженияс другим URL.

Показать встроенную версию

Вы также можете посмотреть это для выбора встроенного stackblitz

0 голосов
/ 28 октября 2019

Вы должны создать интерфейс для данных: 

export interface iUsers {
    person_id: string;
    name: string;
}

, затем вы должны изменить свой код на: 

public data: iUsers[]  = []
 this.http.get<iUsers[]>(url).subscribe((res)=>{
    this.data = res
    console.log(this.data)
    })
...