I am facing a challenge in Angular with a data table where one of the fields is a foreign key (computer_id). Instead of displaying this ID, I want to show a field from another table. Specifically, I have a team ID as a foreign key in the records table that I am currently displaying, and I would like to display the name of that team which is a column in the equipment table (of which the team ID is a foreign key).

I'm struggling to figure out how to achieve this in angular, any suggestions or ideas would be greatly appreciated.

For fetching data from the database, I am using HTTP queries to consume the API with Django Rest Framework. My main concern is how to establish the relationship between the two tables once I retrieve the data through HTTP GET requests.

My database management system is MYSQL.

Below are snippets of the files that link the data to my data table:

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 => { 
        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('An error occurred while trying to retrieve users!' + error);  
        });

    }

equipo.ts (Interface)

export interface Equipos { 

    id_equipo: number;
    nombre: string;
    vendedor: string;
    ip_gestion:string;
    tipo: string;
    localidad:string;
    categoria:string;
    id_port: number;
    ultima_actualizacion:string;
}

port.ts (Interface)

export interface Port { 

    id_port: number;
    name_port: string;
    }

home.component.html

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

  <fa-icon id='new_equi' [icon]=icon_new class="btn btn-primary" (click)="onCreate()" matTooltip="Create" 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>Equipment ID</th>
          <td mat-cell *matCellDef="let element">{{element.id_equipo}}</td>
        </ng-container>

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

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

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

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

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


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

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

        <ng-container matColumnDef="ultima_actualizacion">
          <th mat-header-cell *matHeaderCellDef>Last Update </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>Actions</th>
          <td mat-cell *matCellDef="let element">
           <fa-icon [icon]=icon_edit class="btn btn-success" (click)=onEdit(element) matTooltip="Edit" matTooltipPosition="left"></fa-icon>&nbsp;
           <fa-icon [icon]=icon_delete class="btn btn-danger" matTooltip="Delete" matTooltipPosition="right" ></fa-icon>
          </td>
        </ng-container>

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

How can I display the name_port instead of the id_port attribute using the foreign key association?