The object is not a valid function

Within this class object, I have an instance of a class that I am unable to call its functions within. Despite the IDE allowing me to call the getPoistionDiagram function:

export class NodeW {
  childrenIds: string[];
  diagram?: {
    coordinates: {
      x: number;
      y: number;
    };
  } | null;
  nodeId: string;
  parameters: {
    childrens?: string[];
    name?: string;
    nodeNumber?: string;
    original?: string;
    cases?: any;
    parent?: any;
    extra?: any;
    copyIds?: any;
    copyNames?: any;
  };
  type: NodeType;

  constructor(
    childrenIds: string[],
    nodeId: string,
    parameters: {},
    type: NodeType,
    diagram?: { coordinates: { x: number; y: number } },
  ) {
    this.childrenIds = childrenIds;
    this.diagram = diagram;
    this.nodeId = nodeId;
    this.parameters = parameters;
    this.type = type;
  }

  getPositionDiagram(i: number): { x: number; y: number } {
    return {
      x: !this.diagram ? 20 * 10 : this.diagram.coordinates.x,
      y: !this.diagram ? i * 120 : this.diagram.coordinates.y,
    };
  }
}

export class NodesArray {
  private nodes: NodeW[];
  private createNewNodesService?: CreateNewNodesService;

  constructor(nodes?: NodeW[]) {
    if (nodes && nodes.length > 0) {
      this.nodes = nodes;
    } else {
      this.nodes = DEFAULT_NODE_ARRAY();
    }
  }

  getNodes(): NodeW[] {
    return this.nodes;
  }

  setNodes(nodes: any) {
    this.nodes = nodes;
  }

  getParentNode(nodeId: string) {
    for (let i = 0; i < this.nodes.length; i++) {
      if (this.nodes[i].childrenIds.includes(nodeId)) {
        return this.nodes[i].nodeId;
      }
    }
    return null;
  }
}

When I try to access the method inside the attribute, it does not allow me to access the methods of NodeW and also indicates that it is not of type NodeW when checked.

Could this issue be related to the forEach() method used?

Answer №1

It appears that your NodeW class does not have access to getNodes because it is a method within NodesArray. Therefore, you cannot access getPositionDiagram. There is no need to access getNode:

this.nodes?.getNodes()!.forEach((node: NodeW, i) => {       
node.getPositionDiagram(i) // => .getPositionDiagram() is not a function  
});

Instead, you should do the following:

this.nodes.forEach((node: NodeW, i) => {       
node.getPositionDiagram(i)  
});

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

Apologies: the declaration file for the VueJS application module could not be located

Hey there! I'm currently working on a VueJS application using NuxtJS. Recently, I added an image cropping library called vue-croppie to my project. Following the documentation, I imported the Vue component in the code snippet below: import VueCroppie ...

Defining a JSON file interface in Angular to populate a dropdown box with dependencies

I've embarked on an exciting project to develop a cascading dropdown box filter, and it's proving to be quite challenging. I'm taking it step by step to ensure clarity. I have obtained a JSON file containing the data required to populate de ...

Utilize SCSS values within TypeScript by applying them on a class level

let changeClassDisplay = document.getElementsByClassName('sidebar'); for (var i = 0; i < changeClassDisplay.length; i += 1) { changeClassDisplay[i].style.display = 'block'; } I encountered an issue with this code whe ...

What is the best way to interpret the data from forkjoin map?

As a newcomer to angular and rxjs, I am seeking guidance on how to properly retrieve data from forkJoin using a map function. ngOnInit(): void { this.serviceData.currentService.subscribe(service => this.serviceFam.getAllFamilles().pipe( ...

Using mat-select along with formControl to establish the default value

I'm struggling to assign a default value to my formControl, but it doesn't seem to be working as expected. select-hint-error-example.ts export class SelectHintErrorExample { animalControl = new FormControl('', [Validators.required]) ...

Exploring the connections among Angular, Angular-CLI, Angular-seed, and Ionic

I'm currently tackling a project in Angular 2. I'm a bit puzzled about the relationship between CLI, Seed, and Ionic with Angular. Are they considered sub-frameworks of Angular? ...

Updating a data attribute in Angular 2: A different approach

Currently, I am utilizing ConvertFlow to integrate pre-designed form templates into my project. To specify where the form should appear, I include a div with the unique identifier of the form created within their platform. While this process is straightfor ...

update the data source of the material table inside the subscription

Seeking guidance for updating a MatTable datasource within an Angular application. The current Typescript code involves fetching data from an API using AdminService, iterating over the results to make additional API calls for more information about a fleet ...

Receiving an error in Typescript when passing an object dynamically to a React component

Encountering a typescript error while attempting to pass dynamic values to a React component: Error message: Property 'title' does not exist on type 'string'.ts(2339) import { useTranslation } from "react-i18next"; import ...

typescript add an html element to an existing html document

I'm experimenting with creating a dynamic HTML element using TypeScript to display on a webpage. In my .ts file, my code looks like this: const displayContent = document.getElementById("display-content") as HTMLOutputElement; var displayVariable = " ...

The error `npm run server` is not able to recognize the command '.' as an internal or external command

While working on my project from github https://github.com/angular-university/reactive-angular-course, I encountered an issue. Even though I have all the latest dependencies and am running on Windows, I am facing this problem. Interestingly, it works fin ...

The reactivity of arrays in Vue components' props is limited

I've got an array with component data that I'm attempting to render using v-for <div :style="style" class="editor-component" v-for="(component, index) in components"> <Component :is="component.name" v-bind="component.o ...

Running an HTTP request conditionally within combineLatest

I'm working on a combineLatest function that makes 2 http requests, but I only want the second request to be made if a specific condition is satisfied. combineLatest([ this.leadsService.fetchALLLeadsActivityChart(this.clientId, this.getParams(option ...

Mental stability groq fails to provide the requested information

Having difficulty using Groq to fetch data. All other Groq queries work fine, except this one. When manually setting the $slug variable, the data I'm trying to query works with the Sanity Groq VS plugin but returns undefined in my web app. Query: exp ...

Enhance the existing validation capabilities by incorporating additional validation functions into ngrx-forms

Is it possible to include additional validation functions in a form control state without overriding the existing ones? I have already included the required function from my reducer. I attempted the following code: validate(myControl,[email]) However, w ...

Check the status when clicking on an event using Angular Material

I am working with an Angular element that involves a checkbox. <mat-checkbox class="btn-block" labelPosition="before" (change)="showOptions($event)" (click)="makeJSON($event.checked,i,j,k)"> </mat-chec ...

Issue with Typescript Application not navigating into the node_modules directory

After attempting to load the app from the root directory of our server, it became clear that this was not a practical solution due to the way our application uses pretty URLs. For instance, trying to access a page with a URL like http://www.website.com/mod ...

Generating ambient module declarations in Typescript for distribution on NPM

Seeking advice on generating TypeScript ambient module declarations for a node (commonjs) npm package being developed in TypeScript. Encountering confusion around the proper method to have TypeScript create these ambient module declarations for node / comm ...

Retrieve the value of [innerHTML] from a subcomponent

I am trying to retrieve the [innerHTML] from a child component Greetings everyone There is a component named 'contact-us' containing the following field. <div [innerHTML] = "legalContent.disclaimer"></div> I have included ...

What causes a folder to disappear after rerunning in nest.js?

When working on my project using nest.js in MacOS Sonoma, I encountered a problem where the image folder src/products/images gets deleted after every project rerun (npm start). The images are saved like this: for (const image of images) { const fileName ...