angular 5：设置（单击）对象的值不起作用

Question

我有一个导航菜单，它是使用 navigation.ts json 文件为菜单项呈现的。当它到达 navitem 组件时，它使用 ngIf 检查导航文件中的项目是否有 "function" 键，如果有，所需的行为是使用 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

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

Answer 2

问题出在这里：

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

这里：

(click)="item.function()"

您不能简单地传递一个字符串并期望组件执行一个函数并且确切地知道该做什么。这里需要传递实际的功能。

您的设置看起来配置过度。我会拆除配置并将逻辑放入组件本身。不要害怕拥有更多的模板，如果有的话，它会让事情更清晰（与配置相反）

Answer 3

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

字符串不是函数，虽然您可以使用 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)"

angular 5：设置（单击）对象的值不起作用

angular 5: setting (click) value from an object not working

javascript

typescript

angular

angular5