ngFor中的数据绑定函数参数

Question

我正在尝试将cat的值绑定到(click)函数参数，并且可以理解地收到错误。有没有办法在不循环<button>？

的父元素的情况下执行此操作

<button type="button" (click)="UpdateCategoryFilter({{cat}})" *ngFor="let cat of categories">
        {{cat}}
</button>

Answer 1

永远不要将[...]或(...)与{{...}}合并为一个或另一个，但不能同时将两者合并

应该是

 (click)="UpdateCategoryFilter(cat)"

{{...}}也仅用于字符串插值。以这种方式绑定的值将始终为字符串，而如果[foo]="someValue"是属性，someValue将使用原始类型传递foo。

Answer 2

在html中，您在事件的引号（例如(click)）之间编写的代码是纯typecript / js代码，因为您不会在您的打字稿代码中编写{{cat}} ，你不应该在你写的地方写它。 想象一下，您刚刚尝试做的是将cat替换为它的代码值，然后执行代码UpdateCatagoryFilter(x)，其中x是cat的值，并尝试将其用作变量名称。 (event)="..."语法的含义是：当发出事件event时，执行代码...。