使用Angular显示外键值而不是键

Question

我创建了两（2）个表 1.服务：名称，service_type（来自service_type的ID） 2. service_type：ID，名称

我正在使用Angular7从Laravel API获取端点。我想显示service_type表中的名称（值而不是键）。服务是主表。

我已经创建了model.ts，service.ts component.ts和component.html

模型

export class Services {
    _id: string;
    name: string;
    service_type: number;
  }

服务

  getServices (): Observable<Services[]> {
    return this.http.get<Services[]>(apiUrl)
      .pipe(
        tap(services => console.log('Fetch services')),
        catchError(this.handleError('getServices', []))
      );
  }

  getService(id: number): Observable<Services> {
    const url = `${apiUrl}/${id}`;
    return this.http.get<Services>(url).pipe(
      tap(_ => console.log(`fetched service id=${id}`)),
      catchError(this.handleError<Services>(`getService id=${id}`))
    );
  }

component.ts

  displayedColumns: string[] = ['name', 'service_type'];  
  data: Services[] = [];
  isLoadingResults = true;  

  constructor(private api: ServicesService) { }

  ngOnInit() {

    this.api.getServices()
      .subscribe(res => {
        this.data = res;
        console.log(this.data);
        this.isLoadingResults = false;
      }, err => {
        console.log(err);
        this.isLoadingResults = false;
      });

component.html

      <tr  *ngFor="let datas of data">
          <td>{{datas.name}}</td>
          <td>{{datas.service_type}}</td>
        <td>

在

  

{{data.service_type}}

来自另一个名为service_type的表，我想显示值（名称）而不是键（id）