The object referred to by v.context.$implicit.(PropertyName) does not have a callable method

Question

The object referred to by v.context.$implicit.(PropertyName) does not have a callable method

In Angular6, I want to implement dynamic permissions. My goal is to fetch a list of menu items from the database:

<li *ngFor="let op of optionList">
    <!-- <fa-icon [icon]="op.icon"></fa-icon>  -->
    <label (click)='op.routeFunctionName()'>{{op.optionName}}</label>
</li>

The function op.routeFunctionName() is intended for routing purposes.

This is an example of how routing should be implemented:

GoRoleManager() {
     this.router.navigate(['panel/dashboard/'+this.userName+'/role']);
}

However, when clicking on the menu item, I encounter the following error:

ERROR TypeError: _v.context.$implicit.routeFunctionName is not a function

What could be causing this problem? How can it be resolved?

javascript angular typescript angular6

Answer 1

Answer №1

It seems like you mistakenly saved JavaScript code in the variable routeFunctionName and attempted to call it as a function. In reality, it's just plain text. If you really want to execute it, you can use eval, but this is considered not recommended.

Update: Please refer to the comments for additional information.

If you wish to invoke a function using a string variable, you should format it as shown below:

<label (click)='this[op.routeFunctionName]()'>{{op.optionName}}</label>

Answer 2

It seems like you mistakenly saved JavaScript code in the variable routeFunctionName and attempted to call it as a function. In reality, it's just plain text. If you really want to execute it, you can use eval, but this is considered not recommended.

Update: Please refer to the comments for additional information.

If you wish to invoke a function using a string variable, you should format it as shown below:

<label (click)='this[op.routeFunctionName]()'>{{op.optionName}}</label>

The object referred to by v.context.$implicit.(PropertyName) does not have a callable method

Answer №1

Similar questions

Tips for uploading information to a web service

Creating an interactive table with the power of FPDF and PHP

What is the most efficient way to assign multiple keys and values to an object in JavaScript using a function?

Encountered a 400 error when trying to install Angular CLI on Windows 10 through a proxy server

Having trouble making md-data-table directives function properly

Is it possible to receive live updates from a MySQL database on a webpage using node.js and socket.io?

Error in NextJS Middleware Server: Invalid attempt to export a nullable value for "TextDecoderStream"

Transforming JSON data into XML using Angular 7

Create a PDF document using the combined HTML content

Gradient transition effect changing background color from bottom to top

Converting URL-esque information to JSON using JavaScript

Learn the process of importing data types from the Firebase Admin Node.js SDK

Pass data back and forth between app.js (node) and javascript (main.js)

JavaScript timekeepers and Ajax polling/scheduling

Empty screen appears when "npm run serve" command is executed following the build process

Tips for creating animated arc fills using CSS

Creating PDF from HTML in Angular 2: A Step-by-Step Guide

Trouble altering an attribute using jquery

Navigating between pages in ReactJS using Material UI can be made simple and efficient with the

Creating an interactive animation of bouncing balls within an HTML5 canvas using JavaScript