单击事件不显示结果 (Angular)

Question

我是 Whosebug 和 Angular 的新手。我正在 Angular 中编写前端应用程序（电子商务）。我将点击事件绑定到垫子菜单的按钮，以便具有以下行为：当我点击按钮时，我想显示已点击类别的产品。例如，如果我单击“彩妆”按钮，我希望显示类别为“彩妆”的所有产品。问题是，当我点击按钮时，浏览器上没有显示任何内容，但我想应用程序的逻辑是有效的，因为如果我打开浏览器的控制台，则会打印出所选类别的产品。

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

Answer 1

我认为您错过了将响应绑定到属性，然后使用那个属性在浏览器上显示数据。

我不知道响应类型，出于演示目的，假设它是一个字符串。

首先，您需要像创建 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

单击事件不显示结果 (Angular)

Results not displayed with click event (Angular)

html

frontend

mouseclick-event

angular-material

angular