angular - 根据 id 获取 API 数据

场景：

我有一个 API：

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

就像在 API /branches 中，意味着该 API 有多个具有唯一 ID 的 branches。每个 branch 都会有它自己的 contacts。

现在我正在通过提及特定的分支 ID（即 8f00752-cdc6）来调用一个特定的分支 contacts，如下所示：

customers.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();
  }

}

为了显示 联系人，我在另一个名为 contacts 的组件中调用 getContactList 方法，如下所示：

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（即 8f00752-cdc6） 并仅获取该指定分支（即 8f00752-cdc6）的 联系人，我想根据 我从下拉菜单选择的分支 获取 分支 的 联系人

为此，我有另一个组件叫做 branch，我在其中调用所有的 branches 并像这样显示在 dropdown 中：

分支 组件代码：

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('');
  }

}

在从branch组件中的dropdown选择后，我如何将branch id传递给方法，即：

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 文件中？

答案＃1

试试像这样的东西：

在你的 mat 选项上放置 (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();
     }

希望这能帮到你！！