我是 Stackoverflow 和 Angular 的新手。我正在用 Angular 撰寫一個前端應用程式（電子商務）。我將單擊事件系結到 mat-menu 的按鈕，以便具有以下行為：單擊按鈕時，我想顯示已單擊類別的產品。例如，如果我單擊“化妝”按鈕，我希望顯示所有類別為“化妝”的產品。問題是，當我單擊按鈕時，瀏覽器上沒有顯示任何內容，但我認為應用程式的邏輯可以正常作業，因為如果我打開瀏覽器的控制臺，則會列印出所選類別的產品。
product.component.html:
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="categoryFilter('Make-up')"> Make-up</button>
...
</mat-menu>product.component.ts：
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css'] })
export class ProductComponent implements OnInit {
public products: Product[] = [];
public product!: Product;
constructor(private productService: ProductService) { }
ngOnInit() {
this.getProducts();
}
public getProducts(): void{
this.productService.getProducts().subscribe(
(response: Product[]) => {
this.products= response;
},
(error: HttpErrorResponse) => {
alert(error.message);
}
);
}
public categoryFilter(category: string): void{
this.productService.getProductsByCategory(category).subscribe(
(response: void) => {
console.log(response);
},
(error. HttpErrorResponse)=>{
alert(error.message);
}
)
} }
uj5u.com熱心網友回復：
我認為您錯過了將回應系結到屬性，然后使用該屬性在瀏覽器上顯示資料。
我不知道回應型別，出于演示目的，假設它是一個 string。
首先，您需要創建一個屬性，就像您創建的一樣，public product!: Product;我們稱之為categoryName: string
在點擊事件中，您必須將此屬性與您的回應系結，因此它應該如下所示：
public categoryFilter(category: string): void{
this.productService.getProductsByCategory(category).subscribe(
(response: string) => {
this.categoryName = response;
console.log(response);
},
(error. HttpErrorResponse)=>{
alert(error.message);
}
)
}
現在您必須將它系結到categoryName您的 HTML 中，以便它可以顯示。您可以使用 Angular 的文本插值，它使用大括號 {{}} 在 HTML 中顯示字串值。因此，您的 HTML 將如下所示：
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="categoryFilter('Make-up')"> {{ categoryName }} </button>
...
</mat-menu>
我建議你繼續閱讀 Angular 的指南。
Angular 的文本插值：https ://angular.io/guide/interpolation
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/419631.html
標籤：
上一篇：如何打造凹弧形側邊欄？