Каким образом поле в другой таблице может быть датировано угловым с помощью внешнего ключа?

Question

У меня есть таблица данных в угловых и одно из полей или столбцов этой таблицы является внешним ключом, я имею в виду идентификатор (computer_id), но я хочу показать вместо этого идентификатора поле другой таблицы, то есть Я имею в таблице записей (таблицу, которую я показываю) идентификатор команды в качестве внешнего ключа, и я хочу показать имя этой команды, которая является столбцом таблицы оборудования (таблица, в которой у меня есть идентификатор как внешний ключ в таблице рекордов).

Я понятия не имею, как сделать это в угловом формате, если бы вы дали мне идею, они бы мне очень помогли.

PD: чтобы принести мне данные из базы данных, я использую API через http-запросы и использую django rest framework, я сомневаюсь, что мне нужно будет привести меня по запросу http, чтобы получить две таблицы, но потом, как и я отношение к таблице записей.

В качестве менеджера баз данных я использую MYSQL

Ниже я оставляю файлы того, как я связываю данные с моей таблицей данных

service.ts

  public getAllEquipos() : Observable<Equipos[]> {
          return this.http.get<Equipos[]>(this.baseurl + 'equipos')
          } 

  public getAllPort() : Observable<Port[]> {
          return this.http.get<Port[]>(this.baseurl + 'puertos')
          } 

home.component.ts

export class HomeComponent implements OnInit {

  nuevosEquipos: any[]=[];
    constructor(
      // Inject services
      private http: HttpRequestsService,
      private service:PrtgService,
      private dialog: MatDialog,

    ) { }

    displayedColumns: string[] = ['id_equipo', 'nombre', 'vendedor','ip_gestion','tipo','localidad','categoria','name_port','ultima_actualizacion','actions',];  
    dataSource:any;  

@ViewChild(). 
    @ViewChild(MatPaginator) paginator: MatPaginator;
    //@ViewChild(MatSort) sort: MatSort;                    

    ngOnInit() {                        

      this.service.getAllEquipos().subscribe(Data => { // Imprimiendo en consola para probar que esta leyendo el modelo en JSON
        console.log(Data);
      })

    this.RenderDataTable()  

    }

    RenderDataTable() {   

      this.service.getAllEquipos().subscribe(  
        (res) => {  
          this.dataSource = new MatTableDataSource();  
          this.dataSource.data = res;  
          this.dataSource.paginator = this.paginator;
           console.log(res)

        },  
        (error) => {  
          console.log('Se produjo un error mientras intentaba recuperar 
                      Usuarios!' + error);  
        });

    }

equipo.ts (интерфейс)

export interface Equipos { 

    id_equipo: number;
    nombre: string;
    vendedor: string;
    ip_gestion:string;
    tipo: string;
    localidad:string;
    categoria:string;
    id_port: number;     // Here I have the id of my model (table) 
                         // "port"(id_port) and I want to show the 
                         // name of the port instead of the ID
    ultima_actualizacion:string;
}

port.ts (интерфейс)

export interface Port { 

    id_port: number;
    name_port: string;
    }

home.component.html

 <mat-form-field>
    <input matInput (keyup)="DoFilter($event.target.value)" placeholder="Filtrar">
  </mat-form-field>

  <fa-icon id='new_equi' [icon]=icon_new class="btn btn-primary" (click)="onCreate()" matTooltip="Crear" matTooltipPosition="above"></fa-icon>
  <br>     
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" align="center">

        <!-- Position Column -->
        <ng-container matColumnDef="id_equipo">
          <th mat-header-cell *matHeaderCellDef>ID Equipo</th>
          <td mat-cell *matCellDef="let element">{{element.id_equipo}}</td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="nombre">
          <th mat-header-cell *matHeaderCellDef>Nombre Equipo</th>
          <td mat-cell *matCellDef="let element" >{{element.nombre}}</td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="vendedor">
          <th mat-header-cell *matHeaderCellDef>Vendedor</th>
          <td mat-cell *matCellDef="let element">{{element.vendedor}}</td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="ip_gestion">
          <th mat-header-cell *matHeaderCellDef>IP Gestion</th>
          <td mat-cell *matCellDef="let element">{{element.ip_gestion}}</td>
        </ng-container>

        <ng-container matColumnDef="tipo">
          <th mat-header-cell *matHeaderCellDef>Tipo</th>
          <td mat-cell *matCellDef="let element">{{element.tipo}} </td>
        </ng-container>

        <ng-container matColumnDef="localidad">
          <th mat-header-cell *matHeaderCellDef>Localidad</th>
          <td mat-cell *matCellDef="let element">{{element.localidad}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>

        <ng-container matColumnDef="categoria">
          <th mat-header-cell *matHeaderCellDef>Categoria</th>
          <td mat-cell *matCellDef="let element">{{element.categoria}}</td>
        </ng-container>

        <ng-container matColumnDef="id_port_port">
          <th mat-header-cell *matHeaderCellDef>Nombre Port</th>
          <td mat-cell *matCellDef="let element">{{element.id_port}}</td>
        </ng-container>

        <ng-container matColumnDef="ultima_actualizacion">
          <th mat-header-cell *matHeaderCellDef>Ultima Actualizacion </th>
          <td mat-cell *matCellDef="let element">{{element.ultima_actualizacion | date:'d/M/yyyy, h:mm a'}}</td>
        </ng-container>

        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>Acciones</th>
          <td mat-cell *matCellDef="let element">
           <fa-icon [icon]=icon_edit class="btn btn-success" (click)=onEdit(element) matTooltip="Editar" matTooltipPosition="left"></fa-icon>&nbsp;
           <fa-icon [icon]=icon_delete class="btn btn-danger" matTooltip="Eliminar" matTooltipPosition="right" ></fa-icon>
          </td>
        </ng-container>

  </table>        
        <mat-paginator [pageSizeOptions]="[5,10,20,50,100]" showFirstLastButtons></mat-paginator>          
</div>

Как мне показать name_port в атрибуте id_port, используя этот внешний ключ?

Answer 1

в backend и frontend (угловое приложение) вам нужно иметь две отдельные модели для создания (публикации) и получения данных, например, у нас есть модель персонажа, как показано ниже:

interface PersonForCreation {
    id:number;
    name: string;
    computerId: number;
}

эта модель предназначена для создания и обновления, и нам нужна другая модель для запроса на получение, подобная этой:

interface Person {
    id:number;
    name: string;
    computer: Computer
}

interface Computer{
    id:number;
    name: string;
}

или вы можете подготовить модель Person для получения такой информации в бэкэнде и отправить клиенту

interface Person {
    id:number;
    name: string;
    computerName: string;
}

и показать поле computerName в таблице данных или p.Computer.name.

если вы получаете порты и оборудование отдельно, не соединяя их в бэкэнде, вы можете сделать это в угловом формате:

    <ng-container matColumnDef="id_port_port">
      <th mat-header-cell *matHeaderCellDef>Nombre Port</th>
      <td mat-cell *matCellDef="let element">{getPortName(element.id_port)}}</td>
    </ng-container>

  public getPortName(portId) {
      //when you request ports with getAllport save ports in array 
      //dictionary or find them in normal array 
      //theme later 
      //or return ports.find((port)=>(port.id === portId)).name
      return ports[portId];
  }