Question

我有一个使用菜单项的navigation.ts json文件呈现的导航菜单。当到达navitem组件时，它使用ngIf检查导航文件中的项目是否具有“功能”键，如果存在，则所需的行为是使用对象中item.function的字符串值来填写（点击）事件的值。

实际上，控制台会引发错误，提示“ _co.item.function不是函数”

HTML

<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
        [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
    {{item.badge.title}}
    </span>
</span>

Navigation.ts

      [{
"id": "accounting",
"title": "Accounting",
"type": "collapse",
"children": [
  {
    "id" : "salesmenSalesLocation",
    "title": "Salesmen Sales Location",
    "type": "item",
    "function": "handleSelect(ReportTypes.SalesmenSalesLocations)"
  },
  {
    "id": "laggingLedgerEntries",
    "title": "Lagging Ledger Entries",
    "type": "item",
    "function": "handleSelect(ReportTypes.LaggingLedgerEntries)"
  }
 ]}]

我也尝试将其作为（click）=“ item.function”进行尝试，但没有成功。

Answer 1

问题就在这里

"function": "handleSelect(ReportTypes.LaggingLedgerEntries)"

在这里：

(click)="item.function()"

您不能简单地传递一个字符串并期望组件执行一个函数，也不知道该怎么做。在这里，您需要传递实际功能。

您的设置看起来配置过度。我会拆掉配置并将逻辑放入组件本身。不要害怕还有更多的模板，如果有的话，它会使内容更清晰（与配置相对）

Answer 2

我假设您可以在此处更改数据源，因为否则我看不到任何好的解决方案。

字符串不是函数，虽然您可以使用eval将其转换为字符串，但这是一个坏主意。相反，您真正应该做的只是传递一个告诉函数使用什么的值。

将数据更改为以下内容：

{
  "id" : "salesmenSalesLocation",
  "title": "Salesmen Sales Location",
  "type": "item",
  "reportTypeSource": "SalesmenSalesLocations"
},
{
  "id": "laggingLedgerEntries",
  "title": "Lagging Ledger Entries",
  "type": "item",
  "reportTypeSource": "LaggingLedgerEntries"
}

然后将该值传递给您的函数，并使用该值告诉它在哪里查找：

handleSelect (reportTypeSource: string) {
    const reportType = ReportTypes[reportTypeSource]
    // continue as before
}

并在您的HTML中这样调用它：

(click)="handleSelect(item.reportTypeSource)"

Answer 3

该功能存在于组件中还是仅存在于模型中？如果只是在模型上，它将无法正常工作。（单击）正在寻找组件上的方法。在这种情况下，它表面上只是一个字符串。

角度5：无法使用对象设置（点击）值

3 个答案: