根據id獲取api數據

Question

設想：

我有一個 API：

https://................../api/branches

正如在 api 中/branches意味着 api 作為具有唯一ID多個branches 。每個branch都有自己的contacts 。

現在我通過提及特定的分支 ID（即 8f00752-cdc6）來呼叫一個特定的分支contacts ，如下所示：

customer.services.ts 文件

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { IBranch, IContact } from 'src/app/models/app.models';

@Injectable({
  providedIn: 'root',
})

export class CustomersService {
 private  baseUrl : string = 'https://................../api/';
 constructor(private http: HttpClient) {
  }

 public getBranchesInfo(branchId : string): Promise<IBranch> {
  const apiUrl: string = 'https://................../api/branches/';
  return this.http.get<IBranch>(apiUrl + branchId).toPromise();
 }

  public async getContactList(branchId: string): Promise<IContact[]> <=======
  {
    const apiUrl: string = `${this.baseUrl}branches/${'8f00752-cdc6'}/contacts`;
    return this.http.get<IContact[]>(apiUrl).toPromise();
  }

}

並disaply我打電話叫另一個組件getContactList方法觸點contacts這樣的：

import { Component, Input, OnInit } from '@angular/core';
import {  IContact } from 'src/app/models/app.models';
import { CustomersService } from 'src/app/services/customers.service';
@Component({
  selector: 'asw-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.css'],
})
export class ContactsComponent  {
  public contacts: IContact[];

  constructor(public customersService: CustomersService) {} 

  public async ngOnInit(): Promise<void> {
    this.contacts = await this.customersService.getContactList('');
    console.log(this.contacts);
  }


}

在這里，我可以登錄並查看上述分支的聯系人（即 8f00752-cdc6）

要求：除了在customers.services.ts文件並獲得硬編碼分支ID（I，E 8f00752-CDC6）只有上述分支（I，E 8f00752-CDC6）接觸，我想要得到contacts的branch基於哪個分支我從下拉列表中選擇

為此，我有另一個名為branch 的組件，我在其中調用所有branches並在下拉列表中顯示如下：

分支組件代碼：

HTML

<mat-form-field>
  <mat-select placeholder="Select Branch">
    <mat-option *ngFor="let branch of branches" [value]="branch.id">
      {{branch.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

TS

import { Component, OnInit } from '@angular/core';
import { CustomersService } from 'src/app/services/customers.service';
import { IBranch } from 'src/app/models/app.models';

@Component({
  selector: 'asw-branch',
  templateUrl: './branch.component.html',
  styleUrls: ['./branch.component.css']
})
export class BranchComponent implements OnInit {
 public branches: IBranch[];

  constructor(public customersService: CustomersService) {} 

 public async ngOnInit(): Promise<void> {
    this.branches = await this.customersService.getBranchesInfo('');
  }

}

從分支組件中存在的dropdown選擇后，如何將分支 id傳遞給方法 i，e：

public async getContactList(branchId: string): Promise<IContact[]>{
   const apiUrl: string = `${this.baseUrl}branches/${'id'}/contacts`;<=======
        return this.http.get<IContact[]>(apiUrl).toPromise();
 }

在customers-services.ts文件中？

Answer 1

嘗試這樣的事情：

將 (onSelectionChange) 事件放在您的墊子選項上

<mat-form-field>
  <mat-select placeholder="Select Branch">
    <mat-option *ngFor="let branch of branches" [value]="branch.id"  (onSelectionChange)="selected($event, branch.id)">
      {{branch.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

然后在您的組件 ts 中：

async selected(event: MatOptionSelectionChange, id: string) {
    if (event.source.selected && id) {
      console.log(id);
      this.result= await this._productService.getContactList(id);
    }
  }

並在您的 service.ts

  public async getContactList(businessId : string): Promise<IContact[]>{
       const apiUrl: string = `${this.baseUrl}branches/${businessId}/contacts`;<=======
            return this.http.get<IContact[]>(apiUrl).toPromise();
     }

希望這對你有幫助！！