Блог

У меня есть таблица в Angular, которая берет данные из веб-API и заполняет их. Что я хочу сделать, это связать первый столбец, который является идентификационным номером (sys_id), с подробным представлением этого идентификационного номера.

Я понимаю, что это связано с отправкой запроса GET к этому api с определенным идентификационным номером для получения этой записи. Для этого я создал сервис, который:

service.ts

   getIncident(sys_id): Observable<any> {
    return this.http.get<any>(this.incidentApiUrl   "/"   sys_id)
       .pipe(
         catchError(this.handleError)
       );
   }
  

таблица.компонент

 <tbody>
    <tr class="" *ngFor="let incident of data">
       <td><a href="">{{incident.number}}</a></td>
       <td style="text-overflow: ellipsis;">{{incident.s}}</td>
       <td>{{incident.n}}</td>
       <td>{{incident.u}}</td>
       <td style="text-overflow: ellipsis;">{{incident.sub}}</td>
    </tr>
 </tbody>
  

Итак, мой вопрос в том, как мне связать подробное представление с первым столбцом и заполнить это представление подробностями?

Спасибо

У вас мог бы быть компонент, который, принимая идентификатор в качестве параметра, вызывал бы ваш api и отображал данные. Используя маршрутизатор, вы могли бы определить url / incident /:id И свой компонент, чтобы использовать «id» в URL и вызывать api с его значением. Итак, тогда в вашей таблице вам просто нужно определить ссылку на /incident /:id для каждой строки.

Маршрутизатор :

   { path: 'incident/:id', component: IncidentComponent},
  

IncidentComponent :

 import { Component} from '@angular/core';
import { ApiService } from 'app/services/api.service';

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-incident',
  templateUrl: './incident.component.html',
  styleUrls: ['./incident.component.scss']
})
export class IncidentComponent {

  constructor(private apiService: ApiService, private route: ActivatedRoute) { }

  private sub: any;
  idParam: string = "";
  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.idParam = params['id'];
      //make you api call here
    });
  }