The primeng MenuItem component does not have a 'command' property and is of type 'never'

I am currently working on implementing a primeng ContextMenu using the Menu Model API. Within the MenuItem object, there is a property named "command" which, to my understanding, should be a function.

As I am receiving the available context menu items from the back-end through an HTTP call, I need to assign this function in the front-end upon data reception.

Although the code compiles and functions correctly, I am encountering an error message in my IDE:

    ERROR in src/app/protected/workbench/sidebar/sidebar.component.ts:61:21 - error TS2339: Property 'command' does not exist on type 'never'.

61           ctxAction.command = this.execCtxAction;

Upon hovering over the variable with my mouse, I have confirmed that ctxAction is indeed of type MenuItem.

The assignment process looks like this:

public getFavourites() {
  let url = "http://localhost:8081/api/fav/all";
  this.http.get<Fav[]>(url).subscribe(
    res => {
      for (const resItem of res) {
        let ctxActionList = resItem.dtoEntity.ctxActionList;
        // the variable ctxAction is of type MenuItem[]
        for (let ctxAction of ctxActionList) {
          ctxAction.command = this.execCtxAction;
        }
      }
      this.fav = res;
    },
    err => { alert("there is an error") }
  );
}

execCtxAction(): void {
  console.log('execute context action');
}

Could someone please point out what I might be doing wrong here?

Thank you in advance!

Answer №1

The issue was identified when the IDE recognized the implicit type, but the compiler did not catch it (or something to that effect).

Therefore, the problem was resolved by adding a specific type definition in the assignment of the context action list to the corresponding variable. In simpler terms, changing this line:

let ctxActionList = resItem.dtoEntity.ctxActionList;

to this:

let ctxActionList: MenuItem[] = resItem.dtoEntity.ctxActionList;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Testing an asynchronous function in JavaScript can lead to the error message: "Have you neglected to utilize await?"

Here is an example of the code I am working with: public getUrl(url) { //returns URL ... } public getResponseFromURL(): container { let myStatus = 4; const abc = http.get(url, (respon) => const { statusCode } = respon; myStatus = statusCode ...

Learn the process of invoking Firebase Functions through AngularFire

My project involves creating a Firebase Cloud function using functions.https.onRequest to act as an API that returns JSON data from the Firebase Realtime database. After some research, I discovered functions.https.onCall, which provides authentication fun ...

Resolve the issue of Angular 9 production build sub-directory crashing upon reload, ensure to implement the solution for both Apache and Nginx

When Angular apps on a production build are reloaded from a sub-directory, they tend to crash. For example, navigating to https://example.com/contact works fine initially, but upon refreshing the page, it crashes. Oddly enough, this issue doesn't seem ...

Checking for valid positive numbers and detecting invalid dates with Angular form techniques

How do I validate an input to ensure it is a positive number and a date no earlier than the current date using Angular's FormControl, FormBuilder, and FormGroup? Here is my code: HTML: <p>Enter price:</p> <input type="number" formCont ...

distinguish different designs for individual components in Angular 5

My project is divided into two main parts: one for public web pages and the other for an admin control panel. Each part has its own set of CSS and javascript files for custom templates. If I include all CSS and js files in index.html, they all load at the ...

Issue encountered while executing ./node_modules/.bin/cucumber-js within GitLab CI

I've encountered an issue while setting up a continuous integration build for my node project. Despite the fact that npm run test runs smoothly in my local setup, I am facing an exception in GitLab CI. The error arises from the following test command ...

Issue with sending headers in HttpClient.post method in Angular 8

I have successfully implemented the following code: this.http.post (TGT_IP,body, {responseType: 'arraybuffer'}).subscribe( (val) => { console.log("POST call successful value returned in body", val); ...

Updating from Angular version 12.0.4 to 12.1.0 results in a runtime error. As a temporary solution, we are reverting back to version 12.0

There is a related issue discussed here: Angular: TypeError: Cannot read property 'firstCreatePass' of null However, the problem in that case pertains to different Angular versions and the solution provided did not resolve my issue. The recurring ...

What is the most suitable data type to represent an empty object?

When I declared the return type of the function below as {}, eslint flagged an error stating not to use {} as a type because it actually means "any non-nullish value". After understanding the meaning behind this error, I realize that specifying return typ ...

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

Within my table, I have implemented a nested loop using the *ngFor directive: <tbody> <tr *ngFor="let dept of salesTarget; let i = index"> <td>{{dept.dept}}</td> <td *ngFor="let month of monthList; ...

How can I transfer the data from a file to upload it in Angular 9 without manually typing it out?

In my Angular application, I have a functionality where users can upload two files for processing on the server. However, I am looking to add a feature that allows users to simply copy and paste the contents of the files into two textboxes instead of going ...

The element ion-virtual-scroll is unrecognized

<ion-virtual-scroll [items]="churchNewsList" approxItemHeight="120px"> <ion-item *virtualItem="let news"> {{ news }} </ion-item> </ion-virtual-scroll> I encountered an issue with the following error messag ...

Filter array to only include the most recent items with unique names (javascript)

I'm trying to retrieve the most recent result for each unique name using javascript. Is there a straightforward way to accomplish this in javascript? This question was inspired by a similar SQL post found here: Get Latest Rates For Each Distinct Rate ...

Using PrimeNG's DataTable component, you can easily modify the class or style of a

Is it possible to dynamically add a class to each individual cell in a table based on the data values? <p-dataTable [value]="invoices" tableStyleClass="table-invoices"> <p-column field="status" header="Status" styleClass="mini status"> ...

Error in Angular 2 Form Validation

Take a look at this simple form example: <form [ngFormModel]="myForm"> <input type="text" [ngFormControl]="fname" placeholder="First Name"/> <div *ngIf="fname.errors.minlength">First name should be at least 2 characters&l ...

Encountering Issue: Unable to locate control with the given name in Angular when generating Dynamic Form with FormGroup

As a beginner in Angular, I aim to develop a dynamic Survey Form that can adjust its questions and input types based on the area. These changes are fetched as JSON data through API calls. Here is the relevant code snippet: .ts File export class Maintenan ...

A step-by-step guide on updating a deprecated typings package manually

Currently, I am developing a NodeJS application using TypeScript and incorporating numerous Node packages. However, not all of these packages come with TypeScript definitions, so Typings is utilized to obtain separate definition files. During the deployme ...

The module 'MatTableModule' could not be located within the '@angular/cdk/table' package during export

Having an issue with using where I'm getting the error message "export 'MatTableModule' was not found in '@angular/cdk/table'. Not sure what I might be doing wrong? You can find more details in my GitHub repository: https://githu ...

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

During a small project I was working on, I decided to add a background image to another image using CSS. Here is the code snippet: .child2 img { width: 200px; height: 200px; border-radius: 50%; background-image: url('./assets/images/imageb ...

Issues with the Angular Global Messaging service and how to tackle them

I am currently developing a web application using Angular 7 and I have implemented an API interceptor to show alerts when errors occur. Everything was working fine until I added a messaging service and messaging component. When I tried pushing the error me ...