Javascript 如何使用angular 6,7,9中的按钮值动态加载API

我需要按照按钮字母值显示API，因此请帮助我纠正解决方案

**How to load an API dynamically by using button values in angular 6,7,9**

app.component.html：
所有品牌都将在这里更换

#
A.
B



app.component.ts：
从“@angular/core”导入{Component，OnInit}；
从'@angular/common/http'导入{HttpClient}；
@组成部分({
选择器：“应用程序品牌全部”，
templateUrl:“./brands all.component.html”，
样式URL:['./brands all.component.scss']
})
导出类组件实现OnInit{
构造函数（私有http:HttpClient）{}
品牌反应；
searchparam='B'；
ngOnInit（）：void
{
this.http.get（“/api/landing？type=products&prefix=“+this.searchparam”）
.subscribe（（数据）=>this.displaydata（数据））；
}
displaydata（data）{this.brandResponse=data；}
}
**如何使用angular 6,7,9中的按钮值动态加载API**

您必须为每个这样的按钮创建单击事件

app.component.html:
<p>brands-all will replace here !</p>

<table>
  <tr>
    <td><button value="%23">#</button></td>
    <td><button value="A">A</button></td>
    <td><button value="B">B</button></td>
  </tr>
</table>
<ul *ngFor = "let eachBrand of brandResponse?.brands.brands['B']">
  <li style="float:left; list-style-type: none;">
    <a href="{{eachBrand.url}}">{{eachBrand.name}}</a>
  </li>
</ul>


app.component.ts:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-brands-all',
  templateUrl: './brands-all.component.html',
  styleUrls: ['./brands-all.component.scss']
})
export class BrandsAllComponent implements OnInit {

  constructor(private http: HttpClient) { }
  brandResponse;
  searchparam = 'B';
  ngOnInit(): void
  {
    this.http.get("/api/landing?type=MERCHANDISE&prefix=" + this.searchparam)
      .subscribe((data) => this.displaydata(data));
  }
  displaydata(data) {this.brandResponse = data;}
}



**How to load an API dynamically by using button values in angular 6,7,9**

<td><button value="%23" (click)="handleClickBtn('%23')">#</button></td>
    <td><button value="A" (click)="handleClickBtn('A')">A</button></td>
    <td><button value="B" (click)="handleClickBtn('B')">B</button></td>

handleClickBtn(value){
   this.http.get("/api/landing?type=MERCHANDISE&prefix=" + value)
      .subscribe((data) => this.displaydata(data));

}