Angular - как добавить значения внешнего ключа

Question

У меня есть четыре (4) таблицы.

1. services : имя, service_type (идентификатор из service_type), channel_id (id из каналов), telco_id (из номера)
2. service_type : идентификатор, имя
3. канал : идентификатор, имя
4. телефон : есть, имя

services является основной таблицей. Я создал форму и форму списка. В форме списка я хочу отобразить значение, а не ключ. Затем в форме создания я хочу отобразить внешние ключи как выпадающий список.

Я создал API от Laravel, в то время как внешний интерфейс Angular7

модель: services.ts

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

сервис: services.service.ts

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';
import { Services } from '../models/services';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "http://localhost/cloudengine-sandbox/cloudsandboxbackend/public/api/services";

@Injectable({
  providedIn: 'root'
})

export class ServicesService {

  constructor(private http: HttpClient) { }

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

  addService (service): Observable<Services> {
    return this.http.post<Services>(apiUrl, service, httpOptions).pipe(
      tap((service: Services) => console.log(`added service w/ id=${service._id}`)),
      catchError(this.handleError<Services>('addService'))
    );
  }

  updateService (id, service): Observable<any> {
    const url = `${apiUrl}/${id}`;
    return this.http.put(url, service, httpOptions).pipe(
      tap(_ => console.log(`updated servicee id=${id}`)),
      catchError(this.handleError<any>('updateService'))
    );
  }

  deleteService (id): Observable<Services> {
    const url = `${apiUrl}/${id}`;

    return this.http.delete<Services>(url, httpOptions).pipe(
      tap(_ => console.log(`deleted service id=${id}`)),
      catchError(this.handleError<Services>('deleteService'))
    );
  }

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }  
}

services.component.ts

import { Component, OnInit } from '@angular/core';

import { ServicesService } from '../../../services/services.service';
import { TokenService } from '../../../services/token.service';
import { Router } from '@angular/router';
import { Services } from '../../../models/services';

@Component({
  selector: 'app-services',
  templateUrl: './services.component.html',
  styleUrls: ['./services.component.scss']
})
export class ServicesComponent implements OnInit {

  displayedColumns: string[] = ['name', 'service_type', 'channel_id', 'call_back', 'telco_id'];  
  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;
      });

    window.dispatchEvent(new Event('load'));
    window.dispatchEvent(new Event('resize'));

    document.body.className = 'skin-blue sidebar-mini';
  }

  ngOnDestroy(): void {
    document.body.className = '';
  }

}

services.component.html

  <div class="box-body">
    <table id="example2" class="table table-bordered table-hover table-striped table-condesed">
      <thead>
      <tr>
        <th class="hidden">Id</th>
        <th>Service Name</th>
        <th>Service Type</th>
        <th>Channel</th>
        <th>Call Back</th>
        <th>Telco</th>
        <th>Actions</th>                   
      </tr>
      </thead>
      <tbody>
      <tr  *ngFor="let datas of data">
          <td>{{datas.name}}</td>
          <td>{{datas.service_type}}</td>
          <td>{{datas.channel_id}}</td>
          <td>{{datas.call_back}}</td>
          <td>{{datas.telco_id}}</td>
        <td>
            <button class="btn btn-info" (click)="updateService(service)">Edit</button>
            <button class="btn btn-danger" (click)="deleteService(service)" style="margin-left: 20px;"> Delete</button>
        </td>                                  
      </tr>
    </table>
  </div>

В форме списка я хочу отобразить значение, а не ключ. Затем в форме создания я хочу отобразить внешние ключи в виде выпадающего списка.

Спасибо

Answer 1

Я не знаю php, поэтому не могу поделиться кодом.Надеюсь, что это поможет.

Чтобы отобразить значения, отличные от id, в представлении списка Предварительно отредактировать и кэшировать строки в service_type.В виде списка просто найдите значения с помощью идентификатора.

Чтобы отобразить внешние ключи в виде выпадающего списка

Используйте кэш, указанный выше, для заполнения поля выбора.