Tips for implementing Nested Interface values within the Grid

I am facing an issue trying to retrieve values from a nested interface. Currently, I am only getting null for the nested interface values, while other values are being retrieved successfully.

import {CyAndNY} from "./CyAndNYInterface";

export interface GetTable{
  price?;
  year?;
  custID?;
  Salary?;

  currentYear: {
    currentYear: CyAndNY ;
 };
    valueForNy: {
      valueforNy: CyAndNY;
    };

}

this.cols= [
              new Column('price','Price')
              new Column('year','Year')
              new Column('custID','customer ID')
              new Column('Salary','Salary')
              new Column('CyAndNY.currentYear','Current Year')
              new Column('CyAndNY.valueForNy','Next Year Value')
            ]

I am looking to display all values in a grid, but currently only Price, Year, Customer ID and Salary are showing up; the nested interface variables are missing.

Answer №1

Make sure to access the CyAndNY property within the currentYear interface as nested properties inside an object. It appears that you are trying to access the properties in a different manner.

Here is a revised suggestion:

currentYear.currentYear.CyAndNY

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

Eliminating an index from a JSON array using Typescript

I'm working with a JSON array/model that is structured as follows: var jsonArray = [0] [1] ... [x] [anotherArray][0] [1] ... [e] My goal is to extract only the arrays from [0] to [x] and save them into their ...

Formulate a multi-line string using a collection in React's JavaScript framework

I'm working on a React function that involves a set and I need to update an HTML element using the data from this set. Below is an example of my code: const updateElement = (mySet) => { document.getElementById('myId').innerHTML = Arra ...

Efficiently integrating Firebase Functions with external sub path imports beyond the project's

I encountered an issue in my firebase functions project with typescript. The problem arises when I use types from outside the project with sub path imports, causing the build files to become distorted. Instead of having main:lib/index.js, I have main:lib/ ...

Securing communication between Angular 2 web pages and the ASP.NET Core server through encryption

I'm relatively inexperienced in this field, so I have a simple question. I am familiar with making Angular 2 Http calls and working with ASP.NET Core Authorization and Authentication. However, I'm wondering if there is encryption of data between ...

Determine the variable height of a div containing dynamic content in order to execute a transform

Looking to create a dynamic container that expands when a button/link is clicked? The challenge lies in achieving this expansion effect with a smooth transition. By using the height: auto property, the container can expand to fit its content, but incorpora ...

Do you need to use NextPage when developing NextJS applications with TypeScript?

When looking at the NextJS examples, particularly the one demonstrating how to incorporate TypeScript with NextJS, I noticed that they do not utilize the NextPage type. The specific file I am referring to can be found here: https://github.com/vercel/next- ...

Encountering a 404 Error in Angular 17 When Refreshing the Page

After completing my Angular 17 project and deploying it to hosting, I encountered an issue where pressing F5 on the page would redirect me to a 404 error page. Despite searching for solutions, I was unable to resolve this situation within Angular 17. I am ...

I am having trouble figuring out the issue with the state and how to properly implement it in Typescript

I am having difficulties sending emails using Nodemailer, TypeScript, and NextJS. The contact.tsx file within the state component is causing errors when using setform. As a beginner in TypeScript, I have been unable to find a solution to this issue. Any he ...

The predicate "adds" is applied to the type rather than substituting it

In my class, I am using a generic type to represent the known elements of its map, as shown below: abstract class Component { ... } class Test<Known extends Component[]> { components: Map<string, Component> ... has<C extends Compon ...

Utilizing Angular RouterLink queryParamsHandling for managing optional parameters

Is there a proper way to combine the existing optional queryParams with an additional optional queryParam while linking in the template? Current URL: /search;brand=Trek Preferred link destination: /search;brand=Trek;start=1 (incrementing startCount) I a ...

Eliminate redundant template code for Angular 2 components

Currently, I am developing a project using Angular 2 with the user-friendly Gentallela Alela HTML template. In many of my views, there are several components that share similar markup in their template files: <div class="col-md-12 col-sm-12 col-xs-12"& ...

The connection named "default" was not located

Error ConnectionNotFoundError: Connection "default" was not found. I encountered this error when I implemented the dependency inversion principle in my project. ormconfig.json { "name": "default", "type": " ...

Dynamically change or reassign object types in TypeScript

Check out the example you can copy and test in TypeScript Playground: class GreetMessage { message: {}; constructor(msg: string) { let newTyping: { textMsg: string }; // reassign necessary this.message = newTyping; this.message.textMsg = msg; ...

encountering issues while trying to set up an Angular project

I encountered an issue in my Mac's terminal while trying to create a new Angular project. Here is the command I entered in the terminal: ng new ProjectName The error message I received: npm WARN deprecated <a href="/cdn-cgi/l/email-protection ...

When selecting a dropdown in Angular 5, the aria-expanded attribute remains unchanged and the 'show' class is not applied. This behavior is specific to Bootstrap dropdowns

Having an issue with the bootstrap dropdown in my Angular project. When I click on it, the dropdown-menu does not show up. The 'show' class is not being added to the dropdown and the 'aria-expanded="false"' attribute does not change to ...

Ways to modify the datepicker format in Angular Material

I am currently facing an issue with the date format generated by the angular material datepicker...Wed Nov 21 2018 00:00:00 GMT+0530 (India Standard Time) My requirement is to receive the date in either (YYYY-MM-DD) or (YYYY-MM-DDTHH:mm) format. Here is ...

How to transfer the label text value from html to .ts file in Ionic 3?

Hey everyone! I just started using Ionic and I'm wondering how to pass the value of a label text from HTML to the .ts file. Here's a snippet of my code: <div class="box" (click)="openChatBot()"></div> <ion-label>LEADER ...

Tips for Verifying Checkbox in Angular 5

When attempting to validate the checkboxes in a form with different fields, I encounter an issue. The HTML code for the form is as follows: <div class="form-group"> <label class="login_label">Courses</label> <span style="col ...

How to link data from a service to an Angular component in a way that ensures the component gets updated whenever there is new data in the service

When data is updated in a service, how can I ensure that the changes are reflected in a component? In my application's header, there is a button that allows users to switch between English and Spanish. However, while the text in the header (a compone ...

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Have you ever noticed that the child elements of an element form hide slowly when using visibility:hidden, but hide quickly when using display:none? This slow hiding can negatively impact user experience. I tried to find information on this issue, but eve ...