Question

我在Angular中有一个表，该表从Web api获取数据并用它填充。我想做的是将（sys_id）ID号的第一列链接到该ID号的详细视图。

我知道这与向具有特定ID号的api发出GET请求以获取该记录有关。我为此创建了一个服务，即：

service.ts

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

table.component

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

所以我的问题是如何将详细信息视图链接到第一列，并用详细信息填充该视图？

谢谢

Answer 1

您可能有一个使用ID作为参数的组件，它将调用您的api并显示数据。使用路由器，您可以定义url / incident /：id 您的组件可以在网址中使用“ id”并使用其值调用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
    });
  }

如何将表链接到Angular中的局部视图

1 个答案: