угловая 5: установка (щелчок) значения из неработающего объекта

Question

У меня есть меню навигации, отображаемое с использованием файла навигационного 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

Эта функция существует в компоненте или только в модели?Если это только на модели, это не будет работать.(щелчок) ищет метод для компонента.Это, якобы, просто строка в этом случае.