Question

我在 Angular 5 应用程序中使用 PrimeNG 5.2 。

当用户点击某个菜单项时，我正在尝试显示产品列表。

为此，我有一个PanelMenu，其中第一级项目包含主要产品类别，第二级别包含子类别。在第二级，每个子类别都有一个关联的click event，我需要在其中放置一些逻辑（按类别获取产品，显示表等）。

这是我到目前为止的工作代码：

(...)
// Populate second level items with subcategories
categories.forEach(cat =>
{
    if(cat['parent'] == category['id']) // 'category' is the first level category
    {
        subcats.push({
            label: cat['description'],
            id: cat['id'],
            command: this.subCatClick
        });
    }
});
items.push({label: category['description'], items: subcats});  // Items of the menu

subCatClick(event)
{
    //this.logger.log(`clicked on cat ${event.item.label}`, false);
    //this.getProductByCategoryId(event.item.id);

    // 'this' refers to the item here !
    console.log(this);
}

正如评论中所提到的，this是指MenuItem（这里是一个子类别），因此不包含对我想要调用的函数/服务的任何引用（在上面的示例中进行了评论））。

这些职能/服务是包含component的{{1}}的成员。如何从PanelMenu？

访问它们

感谢您的帮助。

Answer 1

重写传递函数引用的行：

command: this.subCatClick

到箭头函数语法，它将'this'绑定到被调用者的'this'：

command: (event) => this.subCatClick(event)

或者您可以使用javascript：

的 .bind 关键字

command: this.subCatClick.bind(this)

从MenuItem命令回调

1 个答案: