Utilize the Typescript model in the form of an Array structure

I have created some models and I need to use the type that will be assigned as an array. After receiving a result from an api call, I instantiate a new object of my 'type', but the result is an array. How can I make this work?

When I set the variable parents = new Parents() and then try to use it in Angular with an ngFor, it raises an error about only allowing the use of arrays...

However, when I set parents:any, it works without any issues. I'm still not fully grasping it.

 parents = new Parent();

Then, after the API returns with the data:

 this.parents = this.user.parents;

which is in array form

export class Parent {
 id: number;
 email: string;
 title: string;
 first_name: string;
 last_name: string;
 profile_image: string;
}

Answer №1

If you'd like to achieve this functionality, you have two options:

  1. Create a custom class that implements the Array interface:

    export class CustomArray implements Array<any>{ }
    
  2. Iterate through the properties of the custom class in your ngFor loop:

    <span *ngFor="let prop of props">{{customArray[prop]}}</span>
    

where props = Object.keys(customArray)

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

Module not found when attempting lazy loading routing in Angular2 RC5

Having some challenges implementing RC5 changes in my app, particularly when it comes to lazy loading modules within the routing. Here's the file structure for the affected files in my app: /app /components/meda/meda.module.ts /components/meda ...

Guide on injecting a service into a directive within Angular version 13

I have a directive named UniqueCodeDirective that I am using to validate a reactive form. The reason for this is because I require additional information beyond the form control value, which can be obtained from the routing parameters. However, I am encoun ...

The success of an Angular function hinges on the outcome of an asynchronous function

Scenario: In my code, I have a function named isAuthorized() in a singleton called AuthSessionSingleton. This function depends on the result of an asynchronous operation. The async operation is an API call triggered in the constructor, expecting an objec ...

The value of an Angular array seems to be disappearing after being copied to another array and then cleared

I have encountered an issue while working with arrays. I am initializing two arrays - one with some values and another as empty. However, when I assign the items from the first array to the second array and then clear the first array, it unexpectedly clear ...

What is the method for extracting individual elements from an object returned by a React hook in Typescript?

I am currently working on a component that needs access to the query parameters from React Router. To achieve this, I have been using the use-react-router hook package in my project. This is what I am trying to accomplish: import React from "react; impor ...

What is the best way to differentiate between the legend and chart when working with three separate

I have encountered an issue with my pie charts. The first chart has 10 legends displayed below it, while the second chart only has 4 legends. When I adjust the padding to accommodate the 10 legends in the first chart, the names of the 4 legends in the se ...

Sharing precise API information between React components in React Components

I am currently learning react and facing an issue with sending data to other component files. I am trying to verify a user login from a backend API within an if statement, and if successful, I want to send the user ID to another component file. However, ...

Is it possible to categorize a JSON object based on its properties and then count the occurrences of each property within

I have an array of objects containing booking information and I need to calculate the count of each booking item in every object. const arr = [ { "ID" : 1, "Name":"ABC", "Bookings":[ { & ...

Having trouble retrieving a dynamic name with Formcontrol error?

I keep encountering a typeError in this section of code <p *ngIf="formValue.controls['{{obj.name}}'].invalid, but when I manually enter it like this *ngIf="formValue.controls['uname'].invalid it works perfectly fine. What ...

Issue encountered with express-jwt and express-graphql: TypeScript error TS2339 - The 'user' property is not found on the 'Request' type

Implementing express-jwt and graphql together in typescript has been a challenge for me. import * as express from 'express' import * as expressGraphql from 'express-graphql' import * as expressJwt from 'express-jwt' import s ...

Supabase Authentication User Interface Error: Uncaught TypeError - Unable to access properties of null (specifically 'useState')

Concern Whenever I incorporate this Auth component into my login page, I encounter an issue. I am attempting to adhere to the guidelines provided in Supabase Auth with Next.js Pages Directory. If you suspect that this problem stems from a version discrepa ...

Using Node.js to inject dependencies into the app.js file

As I work on my node.js and typescript application, I followed the approach outlined in an article by Brian Love. You can find a sample code for the server.ts file below: import * as bodyParser from "body-parser"; import * as cookieParser from "cookie-par ...

Creating eight equal sections within HTML <div> elements using Bootstrap

I am brand new to Angular. I need to design something like this: https://i.sstatic.net/Zcb9i.png However, I'm struggling to find the right solution. Here is what I have so far: https://i.sstatic.net/7hsrk.png. Having been a backend developer, I&ap ...

Conditional Skipping of Lines in Node Line Reader: A Step-by-Step Guide

I am currently in the process of developing a project that involves using a line reader to input credit card numbers into a validator and identifier. If I input 10 numbers from four different credit card companies, I want to filter out the numbers from thr ...

`The flaw in filtering logic - an analysis`

Looking to find matching records within two Lists. We have a List called allAnimals with attributes like animalId, and another List named domesticAnimals also containing animalId. The goal is to compare the two lists and create a new list where the anima ...

It appears that Spring Boot is not making a custom header visible to my frontend application

Currently, I am working with a Spring Boot backend and an Angular frontend, where my goal is to enable the download functionality for a pdf file. To achieve this, I have included the following handler in my REST-controller: @GetMapping("/{id}" ...

How to use RxJs BehaviorSubject in an Angular Interceptor to receive incoming data

Being a newcomer to rxjs, I grasp most operators except for the specific use case involving BehaviorSubject, filter, and take. I am working on renewing an oauth access and refresh token pair within an Angular interceptor. While reviewing various codes fro ...

Accessing clipboard contents upon button click using TypeScript

Seeking assistance with retrieving data from the clipboard in TypeScript after clicking on a button. Please provide guidance. Thank you! ...

What sets [NgClass] apart from [class] in Angular JS2?

Consider a view element with the following three attributes: class="red" [class]="isGreen ? green : cyan" [ngClass]="'blue'" Does Angular merge the output of these attributes or does one override the others? If we have: [class]="getElementCla ...

Angular: Creating an instance of a class with StaticProvider passed as a parameter

Having trouble instantiating a class with a StaticProvider. Here's the code snippet: main.ts export function createProvider() { // some implementation return result; // result is a string } const providers = [ { provide: 'TEST' ...