将值传递给函数的参数无法正常工作

Posted 2021-04-04

我正在使用Anular 9和Angular Material开发小型应用程序。我有一个项目列表，每个项目都有一个“编辑”按钮。我试图通过URL将项目的ID传递给editItem()方法，而不是“出于安全考虑”（出于安全原因）“传统上”，但是这种方式：

在模板中：

<div class="item-name">{{node.item.name}}</div>
<button mat-icon-button color="primary" (click)="editItem($event, id:string = node.item.id)">Edit</button>

在.ts文件中：

editItem(event, id): void {
    event.stopPropagation();
    console.log("Item id is: " + id);
}

而不是预期的结果，我收到了Missing expected ) at line <line number>错误。

我在做什么错？什么是（简单的）工作替代方案？

答案

您正在函数中使用类型声明。仅传递值

像这样使用

(click)="editItem($event, node.item.id)"

仅在您的函数中传递项目ID

另一答案

正如评论所暗示的那样，Angular模板中没有命名参数的概念。您可以在.ts文件中定义函数，然后在.html文件中调用该函数。

您应该像这样调用函数：

<button mat-icon-button color="primary" (click)="editItem($event, 
node.item.id)">Edit</button>