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

Question

Как получить значения, которые совпадают на ID с другой таблицей, которая была импортирована? Я в основном хочу импортировать банковские реквизиты из другой таблицы через ID, и я хочу отобразить их рядом с companyName, что на том же ID bankName.

Я пробовал несколько вариантов, но, похоже, ничего не работает.

Спасибо и, пожалуйста, будьте проще, потому что я все еще учусь:)

Интерфейсы :

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

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

Компонент :

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

import { timer } from 'rxjs';
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;
  bankNameany;
  bankName: string;

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

  ngOnInit() {
    this.loadCompanies();
  }

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

  //  companyChange() {
  //    this.bankName = this.banks.find((bank) => bank.id ===
  //     this.selectedCompany.id).bankName;
  // }
}

HTML:

<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"> -->
      <select class="form-control" [(ngModel)]="selectedCompany">
        <option *ngFor="let each of companies" [ngValue]="each">{{
          each.companyName
        }}</option>
      </select>
    </div>
  </ng-container>

  <br />
  <br />

  <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 *ngIf="selectedCompany" class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">{{ selectedCompany.companyName }} {{ bankName }}</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>
-->

Answer 1

Используйте ngModelChange

HTML:

<select  class="form-control" [(ngModel)]="selectedCompany" (change)="companyChange()">

И для отображения названия банка на стороне названия компании:

<h5 class="card-title">{{selectedCompany.companyName}} {{bankName}}</h5>
<h6 class="card-subtitle mb-2">Location: {{selectedCompany.address}} </h6>

В TS:

Объявление переменной экземпляра bankName

bankName:string; 

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

companyChange(){
if(this.banks.length>0){
 this.bankName=this.banks
 .find((bank)=> bank.id == selectedCompany.id).bankName;
 } 
}

Пример в js:

this.banks=[
   {
     bankName:"CITI",
     id:1
   },
   {
     bankName:"HDFC",
     id:2
   }
];
let selectedCompany={
   companyName:'Example Company',
   id:2
}
let bankName=this.banks.find((bank)=> bank.id ==  selectedCompany.id).bankName; 
console.log(bankName);

.as-console-wrapper { max-height: 100% !important; top: 0; }