Typescript object property continues to give undefined value despite object being fully populated

In my class called ParametrosEscaner, the structure is as follows:

export enum TiposPixel {
  BlancoNegro = 0,
  Grises,
  Color
};

export class ParametrosEscaner {
  tipoPixel: TiposPixel;
  resolucion: number;
  duplex: boolean;
  mostrarInterfaz: boolean;
};

I have a component that is supposed to receive an instance of this class using Input:

@Input() parametrosActuales: ParametrosEscaner = new ParametrosEscaner();

  constructor() { }

  ngOnInit() {
    debugger
    if(this.parametrosActuales){
      console.log(this.parametrosActuales);
      this.interfaz = this.parametrosActuales.mostrarInterfaz;
      this.dobleCara = this.parametrosActuales.duplex;
      this.tipoSeleccionado = this.valoresEnum()[this.parametrosActuales.tipoPixel];
      this.resolucionSeleccionada = this.parametrosActuales.resolucion;
    }
  }

Despite the console log showing the object properly, all the properties are returning undefined. I'm puzzled as to why this is happening.

EDIT The parent component that sends the object looks like this:

ngOnInit() {
    this._informacionPreferencias.preferenciasActuales.subscribe(pref => {
      this.preferenciasCargaUsuario = pref;
      debugger
      if(this.preferenciasCargaUsuario.ParametrosEscaner){
        this.parametrosEscaner = this.preferenciasCargaUsuario.ParametrosEscaner;
      }
    })
  }

this.parametrosEscaner is the object that the child component is supposed to receive

Answer №1

It seems like you may be encountering scenarios similar to those mentioned by Alexey (yurzui).

Consider trying the following:

this.interfaz = this.parametrosActuales.MostrarInterfaz;
this.dobleCara = this.parametrosActuales.Duplex;
this.tipoSeleccionado = this.valoresEnum()[this.parametrosActuales.TipoPixel];
this.resolucionSeleccionada = this.parametrosActuales.Resolucion;

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

The correct method for handling arrays with overlapping types and narrowing them down again

When working with arrays containing different types in TypeScript, I often encounter issues with properties that are not present on all types. The same challenge arises when dealing with various sections on a page, different user roles with varying proper ...

I have set up a custom ag-grid three times within a single component, however, only the first instance is properly initialized while the other two instances are not initialized

I have developed a custom ag-grid for reusability in my project. Initially, when I initialize the custom ag-grid in one component, it works perfectly as shown below: example.html <html> <body> <input type="text"> <md-app-aggrid [c ...

Issues arise when attempting to send an HTTP request in Angular 8, although Postman is functioning properly

I am facing difficulties with getting Angular to send my data to the API backend. The API functions correctly when tested with Postman. I have set up a service for the Observable and subscribed to it in the component. My objective is to post the firstnam ...

Tips for incorporating Response_type id_token+code into a login URL within an Angular application through the MSAdal library

We are currently utilizing the msadal library for Azure ad B2C login. I am now looking to include the response_type in the URL https://login.microsoftonline.com/common/oauth2/authorize when a user logs in. Here is the code being used for login: if (!this ...

Angular 10 is displaying a message indicating that a font has not been

I'm facing an error in my Angular project when trying to add a font to the SCSS file. How can I resolve this issue? style.scss: @import "~@angular/material/theming"; @include mat-core(); $PWP-primary: mat-palette($mat-indigo); $PWP-accent: ...

NextAuth is failing to create a session token for the Credential provider

Currently, I am in the process of developing an application using the t3 stack and am facing a challenge with implementing the credential provider from nextauth. Whenever I attempt to log a user in, I encounter an error in the console displaying the messag ...

What sets enum with string values apart from a string type union in TypeScript?

When it comes to defining a variable with a predefined set of values in TypeScript code, there are two approaches - using an enum or using a union. For instance, imagine we have a button with various variants such as primary, secondary, and tertiary. We ...

What is the best way to "connect" an interface in TypeScript?

I'm working on creating a child interface that mirrors the structure of a base interface. Any tips on how to achieve this? interface BaseInterface { api: { [key: string]: string }; ui: { [key: string]: string }; } interface ChildInterface { / ...

Develop a new flow by generating string literals as types from existing types

I'm running into a situation where my code snippet works perfectly in TS, but encounters errors in flow. Is there a workaround to make it function correctly in flow as well? type field = 'me' | 'you' type fieldWithKeyword = `${fiel ...

The process of exporting a singleton instance

I have created a new class called AppViewModel with a setting property set to 1: class AppViewModel { setting: number = 1; } export = AppViewModel; Afterward, I imported the class and instantiated it within another class named OrderEntry: import AppV ...

Comparing Angular i18n JSON files automatically for consistency checks

Within my Angular application, I am working with two translation files: en.json and xx.json. While the standard practice is to create translations in both files for a multilanguage application, some developers may only add translations to one file when tes ...

Obtain information from a web address using Ionic framework

Hello, I am experiencing an issue with retrieving data from a URL in my Ionic application. When using @angular/http to fetch a JSON object from the URL, everything works fine in the browser when running 'ionic serve'. However, when deploying the ...

How can I activate a function in one Angular 2 component from another?

I am working with two components named componentA and componentB. They are both siblings and children of componentMother. My goal is to have a button click on componentA trigger a function call on componentB. Would the best approach be using a service wi ...

Utilizing Angular 2's NgFor directive in SVG Elements

I want to use ngFor to draw an SVG Element that consists of lines. I am struggling with the implementation and need some help fixing the code. Here is what I have so far: my-component.js: import {Component} from 'angular2/core'; @Component({ ...

The CSS variables set within the :root section of styles.scss are not recognized as valid

Trying to implement global colors using CSS variables in my Angular 11 app. The styles.scss file contains: :root{ --primary : #0b68e8; --secondary:#ABCFFF; } .test-class{ background: var(--primary); } However, when applying this class in one ...

Issue with the `instanceof` operator not functioning properly when used with Immutable.js

We've encountered an issue while upgrading our project from typescript2.4 to typescript3.2 specifically with immutable.js. Prior to the update, simply using if(x instanceof Immutable.Iterable) would result in the type of x being Immutable.Iterable< ...

Tips on efficiently reusing shared components within recursive union types in TypeScript

Summary Here's a simple working example in the TypeScript playground: type SimpleExpression = number | string | AddOperator<SimpleExpression> | PrintOperator<SimpleExpression>; type ExtendedExpression = number | string | AddOperator<E ...

Merging an unspecified number of observables in Rxjs

My latest project involves creating a custom loader for @ngx-translate. The loader is designed to fetch multiple JSON translation files from a specific directory based on the chosen language. Currently, I am implementing file loading through an index.json ...

Ways to customize the appearance of Angular material elements one by one?

I have a component that contains two Angular Material form components: <!-- First input --> <mat-form-field> <mat-label>Password</mat-label> <input matInput type="text"> </mat-form-field> <br&g ...

When subscribing to an Observable of type number or string (union type), NaN values are returned for string inputs

Within a component, I have a public member that is defined as follows: public docId$: Observable<number | string>; This means that the document ID can either be an integer or a string. Upon initializing in ngOnInit, I have the following code snippe ...