根据id

Question

场景：

我有一个api：

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

与api中的/branches一样，是指多个branches和唯一的ID的api。每个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），并且仅获取提到分支（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 ：

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

尝试这样：

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

以及您的服务中。

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

希望对您有帮助！