Angular 6/7/9中如何通过按钮值动态加载API并修正实现方案

Let's get your dynamic brand loading working properly. The main issue right now is your code is hardcoded to use the 'B' prefix everywhere—we'll adjust both the template and component to react to button clicks and load the correct API data.

Step 1: Update the Template (app.component.html) #

We'll add click handlers to the buttons, replace the hardcoded 'B' in the *ngFor with a dynamic variable, and add a safety check to avoid errors when data is loading:

<p>brands-all will replace here !</p>
<table>
 <tr>
 <!-- Add click event to pass the button's value as the prefix -->
 <td><button value="%23" (click)="onPrefixSelected($event.target.value)">#</button></td>
 <td><button value="A" (click)="onPrefixSelected($event.target.value)">A</button></td>
 <td><button value="B" (click)="onPrefixSelected($event.target.value)">B</button></td>
 </tr>
</table>

<!-- Use dynamic currentPrefix instead of hardcoded 'B', add ngIf to prevent null errors -->
<ul *ngIf="brandResponse?.brands.brands[currentPrefix]" 
    *ngFor="let eachBrand of brandResponse?.brands.brands[currentPrefix]">
 <li style="float:left; list-style-type: none;">
 <a [href]="eachBrand.url">{{eachBrand.name}}</a>
 </li>
</ul>

<!-- Optional: Show loading state while data fetches -->
<p *ngIf="!brandResponse">Loading brands...</p>

Step 2: Update the Component Class (app.component.ts) #

We'll extract the API call into a reusable method, add a dynamic currentPrefix variable, and handle the button click events to trigger data fetching:

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: any;
 currentPrefix = 'B'; // Default to B as before

 ngOnInit(): void {
   // Load initial data with default prefix
   this.fetchBrands(this.currentPrefix);
 }

 // Reusable method to fetch brands by prefix
 fetchBrands(prefix: string): void {
   this.http.get(`/api/landing?type=MERCHANDISE&prefix=${prefix}`)
     .subscribe((data) => {
       this.brandResponse = data;
     });
 }

 // Handle button click to update prefix and fetch new data
 onPrefixSelected(prefix: string): void {
   this.currentPrefix = prefix;
   this.fetchBrands(prefix);
 }
}

Key Changes Explained #

• Dynamic Prefix Handling: The currentPrefix variable replaces the hardcoded 'B', so the template always uses the selected prefix to render brands.
• Reusable API Method: fetchBrands() lets us call the API with any prefix, avoiding duplicate code when the user clicks a new button.
• Button Click Event: The (click) event on each button passes the button's value (note: %23 is the URL-encoded version of #, which your API expects) to onPrefixSelected(), which updates the prefix and triggers a new API call.
• Safety Checks: *ngIf="brandResponse?.brands.brands[currentPrefix]" prevents Angular from throwing errors when the data is still loading or the selected prefix has no brands.

This solution will work seamlessly in Angular 6, 7, and 9—test it out by clicking each button, and you'll see the brand list update to match the selected prefix!

内容的提问来源于stack exchange，提问作者Surendran Prabhakaran D