Отображение значения внешнего ключа вместо ключа с помощью Angular

Question

Я создал две (2) таблицы 1. services: name, service_type (id из service_type) 2. service_type: id, name

Я использую Angular7 для получения конечных точек из Laravel API.Я хочу отобразить имя (значение, а не ключ) из таблицы service_type.services - это главная таблица.

Я создал model.ts, service.ts component.ts и component.html

model

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

service

  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>

In

{{datas.service_type}}

, который исходит из другой таблицы с именем service_type, я хочу отображать значение (имя), а не ключ (id)