Resolving TypeScript error: Property 'Error' does not exist on type 'Angular2 and Objects'

One of the models I am working with is called "opcionesautocomplete.model.ts"

interface IOpcionesAutocomplete {
    opcionesStyle: OpcionStyle;  
    pcionPropiedades: OpcionPropiedades;
}

export class OpcionesAutocomplete implements IOpcionesAutocomplete {      
     opcionesStyle: OpcionStyle;
     opcionPropiedades: OpcionPropiedades;
    constructor()  { }
}

interface IOpcionStyle {
    width: number;
    height: number; 
    isOverflowY: boolean;
}

export class OpcionStyle implements IOpcionStyle {
      width: number;
      height: number; 
      isOverflowY: boolean;
    constructor()  { }
}

interface IOpcionPropiedades {
    propiedad1: string;
    propiedad2: string; 
    textoEtiqueta: string;
}

export class OpcionPropiedades implements IOpcionPropiedades {
    propiedad1: string;
    propiedad2: string; 
    textoEtiqueta: string;
    constructor()  { }
}

Currently, I am attempting to populate the object in my component with all its properties. However, Angular2 is throwing an error in "mycmp.component.ts":

import { OpcionesAutocomplete, OpcionStyle, OpcionPropiedades } from './../../shared/forms/autocomplete/opcionesautocomplete.model';

export class.... {

    opcionStyle = new OpcionStyle();
    opcionPropiedades = new OpcionPropiedades();

    opcionesAutocompleteClientes : OpcionesAutocomplete = new OpcionesAutocomplete();

    ...

    fillObject(){       
        this.opcionStyle.width=550;
        this.opcionStyle.height=150;
        this.opcionStyle.isOverflowY=true;    
        this.opcionesAutocompleteClientes.opcionStyle = this.opcionStyle; //The error is here
    }   
}

The error is present in the line:

this.opcionesAutocompleteClientes.opcionStyle = this.opcionStyle;

"Property opcionStyle does not exist in type "OpcionesAutocomplete"

Answer №1

It appears there has been a typing error on your part

this.opcionesAutocompleteClientes.opcionesStyle = this.opcionStyle;

Your class is

export class OpcionesAutocomplete implements IOpcionesAutocomplete {      
     opcionesStyle: OpcionStyle;
     opcionPropiedades: OpcionPropiedades;

     constructor()  { }
}

This class contains opcionesStyle, not opcionStyle

Answer №2

Oops, a simple typo! Let's correct it to:

this.opcionesAutocompleteClientes.opcionesStyle = this.opcionStyle;

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

Learn how to display a tooltip for every individual point on a Highcharts network graph within an Angular

I am currently working on developing network graphs using highcharts and highcharts-angular within my Angular application. I have successfully managed to display the graph with datalabels, but now I need to implement tooltips for each point or node on the ...

agm-circle has such a high drag sensitivity in angular 4

I have implemented an agm-circle in an agm-map within Angular 4. Everything is working as expected, however, I am experiencing an issue with the speed at which the circle moves when dragged. Is there a way to slow down this movement? Below is my code sni ...

What are the benefits of using one state in React with useState compared to having multiple states?

Is it more beneficial to optimize and enhance code readability in React using Hooks and Functional components by utilizing a single setState hook or having multiple hooks per component? To further elaborate, let's consider the following: When workin ...

What is the proper way to create a React Context in TypeScript that accepts both a ref and a setState function as arguments?

When encountering various errors, one of them being: Type 'Dispatch<SetStateAction<null>>' is not assignable to type '() => void' My code looks something like this: import React, { ReactElement, ReactNode, useEffec ...

Encountering issues with `npm run build:prod` on Ubuntu 16.04, whereas it runs smoothly on

I've encountered errors when attempting to run "npm run build:prod" on Ubuntu 16.04, even though I don't face the same issues on Windows 10. Both npm and node are up-to-date. It's unclear whether the problem lies with npm or angular. After ...

Managing the expiration time of a Cookie with ngx-cookie-service: Explained

Currently, I am utilizing ngx-cookie-service in my Angular application. According to the official documentation, it is mentioned that a third parameter can be added for defining the expiration time as shown below: this.cookieService.set('CookieName&ap ...

An exploration of navigating through a generic interface in Angular

I've recently started exploring Angular and I'm trying to incorporate a generic interface to reuse pagination models from different sources. Let me share some code examples to clarify. export interface IUser{ id: string; name: string; email: stri ...

Angular2 and the exciting world of Mapbox-gl

I am currently facing an issue with integrating mapbox-gl into my Angular2 application. Despite creating the service, the app is not functioning properly. Service import {Injectable} from '@angular/core'; import * as mapboxgl from 'map ...

Expand or collapse Angular Material Accordion depending on selected Radio button choice

Is it possible to use a mat-accordion with radio buttons where each panel expands only when its corresponding radio button is selected? I have the radio buttons functioning correctly, but the panels are expanding and collapsing with every click rather than ...

Validation of Angular2 Forms

Objective is to compare two password fields to verify if they are the same: <form [ngFormModel]="myForm" (ngSubmit)="onSubmit(myForm.value)"> <ion-label floating>password</ion-label> <ion-input type="password" [ngFormControl]="pa ...

What is the best way to position three DIVs next to each other within another DIV while aligning the last DIV to the right?

I need help formatting a simple list item with three DIVs. The first DIV should be left justified, the second should be able to grow as needed, and the third should be right justified. I currently have them stacked side by side, but can't get the last ...

In terms of function efficiency, what yields better results: using conditional execution or employing conditional exit?

Feedback is welcomed on the efficiency of the following JavaScript/TypeScript solutions: function whatever(param) { if (param === x) { doStuff(); } } or function whatever(param) { if (param !== x) { return false; } doStuff(); } The se ...

Issue: The key length and initialization vector length are incorrect when using the AES-256-CBC encryption algorithm

Within my coding project, I have developed two essential functions that utilize the AES-256-CBC encryption and decryption algorithm: import * as crypto from "crypto"; export const encrypt = (text: string, key: string, iv: string) => { con ...

Does combineLatest detach this from an angular service function?

Check out this test service on Stackblitz! It utilizes the combineLatest method inside the constructor to invoke a service method: constructor() { console.log("TEST SERVICE CONSTRUCTED") this.setParameters.bind(this) this.assignFixedParamete ...

SonarQube flagging a suggestion to "eliminate this unnecessary assignment to a local variable"

Why am I encountering an error with SonarQube? How can I resolve it since the rule page does not offer a specific solution? The suggestion is to eliminate the unnecessary assignment to the local variable "validateAddressRequest". validateAddress() { ...

Navigating through a typescript array containing various types and mapping each element

Is there a way to get [valueOfTypeOne, ValueOfTypeTwo] instead of (valueOfTypeOne | ValueOfTypeTwo)[] for each resulting element in this scenario? const [valueOfTypeOne, ValueOfTypeTwo] = await Promise.all( [ fetchTypeOne(), fetchTypeTwo( ...

Activate Angular Material's autocomplete feature once the user has entered three characters

My goal is to implement an Angular Material Autocomplete feature that only triggers after the user has inputted at least three characters. Currently, I have it set up so that every click in the input field prompts an API call and fetches all the data, whic ...

The URL "http://localhost:8100" has been restricted by the CORS policy, as it lacks the necessary 'Access-Control-Allow-Origin' header on the requested resource

`The CORS policy has blocked access to the XMLHttpRequest at 'http://localhost/phpfile/leave-option.php' from the origin 'http://localhost:8100'. This is due to the absence of the 'Access-Control-Allow-Origin' header on the re ...

Having difficulty launching a TypeScript Node.js application using ts-node and pm2

I have a node app built with TypeScript and it works fine with nodemon, but when I try to move it to the server using PM2, I encounter errors. I've searched GitHub and StackOverflow for solutions, but nothing has worked for me so far. Any help would b ...

Adjusting the transparency of TabBadge in Ionic 2

I am currently working on a project that involves tabs, and I'm looking to update the style of the badge when the value is 0. Unfortunately, I am unsure how to dynamically change the style of my tabs or adjust the opacity of the badge in the style. M ...