Having trouble creating a new object variable from imported interface in Ionic using TypeScript? Let me help you with instantiating it

I'm struggling to get this functionality working properly. It seems like it should be a simple task, but I can't seem to instantiate the CompanyType object in my page/component correctly.

Below is an excerpt from the Interfaces.ts file:

export interface CompanyType {  
  address1: string,
  address2: string,
  address3: string,
  ...
  ...
}

And here is the relevant code snippet from the Ionic page:

...
...
import { CompanyType } from '../../models/Interfaces';

export class CompanyDetailPage {

    company: CompanyType;

    constructor(public navCtrl: NavController, public navParams: NavParams) {}

    ionViewDidLoad() {
        // Save nav params to company object
        this.company = this.navParams.get('company');
    }
}

The navParams are being passed through successfully. If I log the following line of code, it shows the correct value:

console.log(this.company.address1) // Prints the correct value

However, the value is not appearing in the view when using the interpolation syntax:

{{ company.address1 }}

Answer №1

It is recommended to place the code within the constructor instead of the ionViewDidLoad() method. Modify your constructor as follows:

     constructor(public navCtrl: NavController, public navParams: NavParams) {
                   this.company = this.navParams.get('company');
       }

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

Accessing the state from a child functional component and then adding it to an array of objects in the parent component

I'm facing a challenge with a parent component that needs to manage the data of its child components stored in an array of objects. My goal is to add new child components and maintain their information within the parent's state as an array of obj ...

Utilizing TypeScript: Importing a typed module within a d.ts file (from an npm package)

I am currently working on integrating a definition file into an npm package that has dependencies on React. The specific library in question can be found at https://github.com/eiriklv/react-masonry-component. In my TypeScript project, I have successfully ...

Testbed: Issue encountered: Unable to resolve all parameters for PriDateInput component

I am facing an issue while creating an Angular Component with the help of TestBed. The error message I receive is as follows: Error: Can't resolve all parameters for PriDateInput: (?). error properties: Object({ ngSyntaxError: true }) ...

What is the best way to extract data from multiple FormControl instances using RxJS in Angular?

I am currently subscribed to three FormControl instances named filter1, filter2, and filter3. My goal is to fetch the values of all three whenever any one of them changes. I initially attempted to achieve this using combineLatest, but found that it only em ...

Unable to utilize React Icons component as an object value in typescript

Currently, as I develop my personal website using typescript and react, I am faced with an issue in the footer section. I have an array of objects with url and icon properties that I map through to display different icons on each iteration. Initially, this ...

The parameter label is being detected as having an any type, as specified in the Binding element 'label'

Currently, I am referencing an example code snippet from react-hook-form. However, upon implementation, I encounter the following error: (parameter) label: any Binding element 'label' implicitly has an 'any' type.ts(7031) The example c ...

Utilizing mapped conditional types in TypeScript for generic implementations

Can generics be leveraged with mapped types to map method types? For instance, is it feasible to construct a mapped type that adds a first argument of type number to each method? Here's an example in pseudo code (though it won't run): interfac ...

Redis throwing an error - when handling an event

import * as redis from 'redis' import configuration from '../../configuration/settings' const customer = redis.createCustomer(configuration.redis.port, endpoint, configuration.redis.options); customer.on('active', () => { ...

Troubleshooting issue: Webpack dev server's Hot Module Replacement not functioning correctly when

I've been working on a Vue 2 application that is mostly JavaScript, and now I am looking to incorporate some new TypeScript modules and components into it. Everything runs smoothly when I start the webpack dev server. However, whenever I make a chang ...

Issues with style not loading properly within innerHTML in Angular2

Currently, I am in the process of developing a page using Angular2/4 that includes a left navigation bar. To achieve reusability, I have separated this left menu into its own component and nested it within the main component. The objective is to utilize th ...

Developing a custom typography attribute for themes in Material-UI with TypeScript

I have encountered an issue with my code where the palette works fine, but there seems to be a problem with the typography section without any errors being thrown: Here is a breakdown of the steps I took: Firstly, I imported the module import "@mui ...

Adding dynamic row values to a bootstrap table in angular 4 - what's the best approach?

When using an Angular 4 bootstrap table, I am encountering an issue where only the first row value is displayed in the table from the backend when entering a product in the text box and pressing enter. Even though the alert window shows the data for the se ...

Create data transfer objects in openApi using NestJS without the need for a Controller

In developing a NestJS service that serves as a REST API while also sending messages to NATS, we've successfully utilized the NestJS support for generating OpenAPI documentation and converting it into an SDK for our clients. However, we have encounter ...

Limit the selected values to calculate a partial sum

Imagine two distinct classes called professor and student: professor.ts export class Professor { id: number name: string } student.ts import { Professor } from "./professor" export class Student { ...

What is the proper way to add additional properties to an array object when initializing it in TypeScript?

Is there a more elegant solution for creating an object of type: type ArrayWithA = [number, number, number] & { a: string }; I accomplished this by: const obj : any = [1, 2, 3]; obj.a = "foo"; const arrayWithA : ArrayWithA = obj as ArrayWith ...

What is the process for configuring NextJS to recognize and handle multiple dynamic routes?

Utilizing NextJS for dynamic page creation, I have a file called [video].tsx This file generates dynamic pages with the following code: const Video = (props) => { const router = useRouter() const { video } = router.query const videoData = GeneralVi ...

tsconfig.json: No input files were detected in the configuration file

I am encountering an issue with my tsconfig.ts file where it says "No inputs were found in config file 'd:/self-study/Web/Learning/Express/tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude&a ...

Tips for implementing a personalized Circuit Breaker in Node.js that monitors request volume

Currently, I am exploring the most effective way to implement a circuit breaker based on the number of requests served in a Typescript/express application rather than fail percentage. Given that the application is expected to accommodate a large volume of ...

Rollup's watch/build feature is slow to catch up with a single change made

I have a react component library written in typescript that I am using within a monorepo with Lerna. However, I've noticed an issue when working directly in the package or watching for changes through Lerna. Whenever I make changes to the code and sa ...

Implementing various custom validation techniques in Angular 2

I am encountering an issue with adding multiple custom validations to a form. Currently, I am only able to add a single custom validation to my form. How can I include multiple validations? For example: this.user = this.fb.group({ name: ['', ...