如何获取ID上与我要导入的其他表匹配的值？

Question

import { Component, OnInit } from '@angular/core';
import { Company } from '../_models/company';
import { CompanyService } from '../_services/company.service';
import { AlertifyService } from '../_services/alertify.service';

import { AddCompanyComponent } from '../add-company/add-company.component';
import { Bank } from '../_models/bank';
import { BankService } from '../_services/bank.service';






@Component({
  selector: 'app-company',
  templateUrl: './companies.component.html',
  styleUrls: ['./companies.component.css']
})
export class CompaniesComponent implements OnInit {
  selectedCompany: Company;
  companies: Company[];
  banks: any;
  selectedCompanyBank: Bank[];
  bankvalueid: number;

  constructor(private companyService: CompanyService, private alertify: AlertifyService, private bankService: BankService) { }




  ngOnInit() {
    this.loadCompanies();
    this.loadBanks();
    

  }

  async loadCompanies() {
    this.companyService.getCompanies().subscribe((companies: Company[]) => {
      this.companies = companies;

    }, error => {
      this.alertify.error(error);
    });
  }

  async loadBanks() {
    this.bankService.getBanks().subscribe((banks: Bank[]) => {
      this.banks = banks;

    }, error => {
      this.alertify.error(error);
    });
  }

 
  // selectedChangeHandler(event: any) {
  //   this.selectedCompany = event.target.value;
  // }

}

//model of bank

export interface Bank {
    id: number ;
    bankName: string;
    bankAccountNumber: string;

}


//-------------------------------------------------------------------

//model of company

export interface Company {
    id: number;
    companyName: string;
    address: string;
    estimatedRevenue: number;
}

<div id="selectCompanyDiv">
<ng-container *ngIf="companies">
 <div  class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
   
    <label  for="">Select Company</label> 
    <select  class="form-control" [(ngModel)]="bankvalueid"   [(ngModel)]="selectedCompany">
      
    <option  *ngFor="let each of companies "   [ngValue]="each">{{each.companyName}}</option>
    </select>
  </div>
</ng-container>
<br>
<br>



<!-- <button id="addNewCompanyButton"class="btn btn-sm btn-info text-white" [routerLink]="['/add-company']" >Add New Company</button> -->

<!-- <select class="form-control col-lg-8" #selectedValue name="selectedValue" id="selectedValue" [(ngModel)]="company" (ngModelChange)="assignCorporationToManage($event)">
  <option *ngFor="let value of companies" [ngValue]="company">{{value.name}}</option>
</select> -->
<!-- <div id="showValueDiv">
<ul *ngIf="selectedCompany" class="list-group list-group-flush">
  <li class="list-group-item">Company name: {{selectedCompany.name}}</li>
  <li class="list-group-item">Company address: {{selectedCompany.address}}</li>
  <li class="list-group-item">Company Estimated revenue: {{selectedCompany.estimatedRevenue}}₪</li>
  <button>Show more information</button>
</ul>
</div> -->
</div>
<div *ngIf="selectedCompany" class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">{{selectedCompany.companyName}}</h5>
    <h6 class="card-subtitle mb-2">Location: {{selectedCompany.address}}</h6>
    <br>
    <h6 class="card-subtitle mb-2">Estimated revenue: {{selectedCompany.estimatedRevenue}}₪</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Edit Information</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>





<!-- 
<h4>Basic native select</h4>
<mat-form-field>
  <mat-label>Select Company</mat-label>
  <select  matNativeControl [(ngModel)]="selectedCompany">
    <option value="" disabled selected>Select</option>
    <option *ngFor="let value of companies"  [ngValue="value"]{{value.name}}></option>
  </select>
</mat-form-field> -->

如何获取ID与导入的其他表匹配的ID？我基本上想通过Id从其他表中导入银行详细信息，并且我想将其显示在与同一个id的companyName旁边的bankName上，谢谢，如果您可以保持它的简单性，即时通讯仍然在学习：）

import { Component, OnInit } from '@angular/core';
import { Company } from '../_models/company';
import { CompanyService } from '../_services/company.service';
import { AlertifyService } from '../_services/alertify.service';

import { AddCompanyComponent } from '../add-company/add-company.component';
import { Bank } from '../_models/bank';
import { BankService } from '../_services/bank.service';






@Component({
  selector: 'app-company',
  templateUrl: './companies.component.html',
  styleUrls: ['./companies.component.css']
})
export class CompaniesComponent implements OnInit {
  selectedCompany: Company;
  companies: Company[];
  banks: any;
  selectedCompanyBank: Bank[];
  bankvalueid: number;

  constructor(private companyService: CompanyService, private alertify: AlertifyService, private bankService: BankService) { }




  ngOnInit() {
    this.loadCompanies();
    this.loadBanks();
    

  }

  async loadCompanies() {
    this.companyService.getCompanies().subscribe((companies: Company[]) => {
      this.companies = companies;

    }, error => {
      this.alertify.error(error);
    });
  }

  async loadBanks() {
    this.bankService.getBanks().subscribe((banks: Bank[]) => {
      this.banks = banks;

    }, error => {
      this.alertify.error(error);
    });
  }

 
  // selectedChangeHandler(event: any) {
  //   this.selectedCompany = event.target.value;
  // }

}

<div id="selectCompanyDiv">
<ng-container *ngIf="companies">
 <div  class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
   
    <label  for="">Select Company</label> 
    <select  class="form-control" [(ngModel)]="bankvalueid"   [(ngModel)]="selectedCompany">
      
    <option  *ngFor="let each of companies "   [ngValue]="each">{{each.companyName}}{{each.bankName}}</option>
    </select>
  </div>
</ng-container>
<br>
<br>



<!-- <button id="addNewCompanyButton"class="btn btn-sm btn-info text-white" [routerLink]="['/add-company']" >Add New Company</button> -->

<!-- <select class="form-control col-lg-8" #selectedValue name="selectedValue" id="selectedValue" [(ngModel)]="company" (ngModelChange)="assignCorporationToManage($event)">
  <option *ngFor="let value of companies" [ngValue]="company">{{value.name}}</option>
</select> -->
<!-- <div id="showValueDiv">
<ul *ngIf="selectedCompany" class="list-group list-group-flush">
  <li class="list-group-item">Company name: {{selectedCompany.name}}</li>
  <li class="list-group-item">Company address: {{selectedCompany.address}}</li>
  <li class="list-group-item">Company Estimated revenue: {{selectedCompany.estimatedRevenue}}₪</li>
  <button>Show more information</button>
</ul>
</div> -->
</div>
<div *ngIf="selectedCompany" class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">{{selectedCompany.companyName}}</h5>
    <h6 class="card-subtitle mb-2">Location: {{selectedCompany.address}}</h6>
    <br>
    <h6 class="card-subtitle mb-2">Estimated revenue: {{selectedCompany.estimatedRevenue}}₪</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Edit Information</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>





<!-- 
<h4>Basic native select</h4>
<mat-form-field>
  <mat-label>Select Company</mat-label>
  <select  matNativeControl [(ngModel)]="selectedCompany">
    <option value="" disabled selected>Select</option>
    <option *ngFor="let value of companies"  [ngValue="value"]{{value.name}}></option>
  </select>
</mat-form-field> -->

如果可以，请尽量简化：）