Guide to generating an object containing an array of nested objects

Currently, I am utilizing Angular 4 to develop my website. However, I am encountering issues while attempting to create an Object with a vector of objects inside it. This approach is not yielding the desired results for me. Here's a snippet of my code:

Object 1 (disciplinaStatus.module.ts)

export class DisciplinaStatus{
 constructor(public codigo: string,
          public nome: string,
          public status: string,
          public professor:string,
          public cargaHoraria:string,
          public nota: number) {}
}

Object 2 (historicoData.module.ts)

import { DisciplinaStatus } from './disciplinaStatus.model';

export class HistoricoData {
   constructor(public periodo: string,
          public historico: DisciplinaStatus[]) {} //Encountering an issue here!!!
}

Snippet from my component TypeScript code:

import { Component, OnInit } from '@angular/core';
import { DisciplinaStatus } from './models/disciplinaStatus.model';
import { HistoricoData } from './models/historicoData.model';

@Component({
     selector: 'historico-a-component',
     templateUrl: './historico-a.component.html',
     styleUrls: ['./historico-a.component.css']
})
export class HistoricoAComponent implements OnInit {

constructor(historico: HistoricoData[]) {

  historico = [
      new HistoricoData('2016/1', [
          new DisciplinaStatus('001','Redes 1','Completo','Everthon Valadão','60',71.5),
          new DisciplinaStatus('002','Compiladores','Completo','Walace','60',45.5)
      ]),
      new HistoricoData('2016/2', [
          new DisciplinaStatus('001','AED','Completo','Diego Melo','60',22.5),
          new DisciplinaStatus('002','Teoria','Completo','Diego Melo','60',89.5)
      ])
  ];
}

The ERROR Message:

ng:///AppModule/AppComponent.ngfactory.js:7 ERROR Error: StaticInjectorError(AppModule)[HistoricoAComponent -> Array]:
StaticInjectorError(Platform: core)[HistoricoAComponent -> Array]: NullInjectorError: No provider for Array! at NullInjector.get (webpack-internal:///../../../core/esm5/core.js:1209) at resolveToken (webpack-internal:///../../../core/esm5/core.js:1507) at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1449) at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1317) at resolveToken (webpack-internal:///../../../core/esm5/core.js:1507) at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1449) at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1317) at resolveNgModuleDep (webpack-internal:///../../../core/esm5/core.js:11051) at NgModuleRef.get (webpack-internal:///../../../core/esm5/core.js:12284) at resolveDep (webpack-internal:///../../../core/esm5/core.js:12774)

Answer №1

It appears that you are defining a property within the constructor function. Instead, try declaring the property first within the class itself and then simply initializing it in the constructor without passing it as a parameter. This will prevent Angular from attempting to inject anything into the property, as you are essentially redefining it.

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

Issue encountered with passport-local in TypeScript: Unable to utilize 'new' with an expression that does not have a call or construct signature

Currently, I am attempting to implement the passport-local package in TypeScript (version 2.0.0RC); however, a compiler error has arisen: Error TS2351: It is not possible to use 'new' with an expression lacking a call or construct signature. ...

Simulated FileList for Angular 5 App Unit Testing

Imitation FileList In my pursuit of writing a unit test (Angular5), I have encountered the need for a FileList. Despite researching extensively, I have been unable to uncover any clues or solutions. I am starting to question whether this is even feasible ...

Error: The Angular service is throwing a ReferenceError because it is unable to find the definition

Within my Angular service, I have implemented the AudioContext as shown below: @Injectable({ providedIn: 'root' }) export class AudioService { private context = new AudioContext(); ... } During compilation, Angular presents the follow ...

Having trouble accessing a downloaded image saved in local files from Amazon S3 using the AWS SDK in Node.js

I am currently using the node.js aws-sdk package to download files from s3 storage. However, when I download a jpeg image and save it as a local file, I am unable to view it. Is this the correct method for downloading jpeg images? public async downloadFi ...

Determine the chosen selection in an Angular Material autocomplete feature

Is there a method to determine which option is currently selected in the autocomplete feature so that when the user hits tab, I can automatically choose that option instead of changing the focus of the field. Check out my code snippet below: <div clas ...

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

Accordion-inspired animation implemented on an Angular component using a selection of different templates

Currently, I am developing a production app with a card-style layout. All filters (such as date pickers) and visualizers (like tables and charts) are enclosed within a "Card" component. Additionally, there are two child components that inherit from this cl ...

Update the @Input field within an @Component following the completion of an Http Request in Angular2

I am currently developing an application using Angular2. One of the components has a button that, when clicked, triggers a post request to the server. The server will then respond with either an Ok(string) or a BadRequest(string). I am facing difficulties ...

Unable to modify the value of a key within an object using TypeScript

I'm struggling to update the value of a key within an object using TypeScript. Here's an overview of the types I'm working with: export enum BAR_TYPES { apple = "apple", banana = "banana" } export type BarTypes = ...

Encountering the error "Missing property '$$typeof' when trying to extend next/link in Next.js using TypeScript"

I have the following code snippet in my project: import NextLink from 'next/link' import ExternalLink from './External' type PropsType = typeof NextLink & { href: string children: React.ReactNode } export default function Link ...

Manipulating CSS styles through Javascript with passed parameters

I need a feature that allows users to pick the color of the buttons displayed on the website. Currently, I am working with Angular 6 and JavaScript to achieve this functionality. I am focusing on setting the primary color, affecting buttons with the Bootst ...

Using ngIf to validate an empty string in Angular 5

I need assistance with validating an empty string retrieved from a server Although it is usually straightforward, it's just not working as expected <div class="ui-g-2 info-txt" *ngIf="appointment.Notes !==null || appointment.Notes !== ...

Is it possible to broaden Tagged/Discriminated Union in TypeScript within a separate module?

In my system, I have established a method for transferring JSON messages through a socket connection. The communication involves Tagged Unions to categorize different message types: export type ErrorMessage = { kind: 'error', errorMessage: Error ...

Steps to disable the tab functionality in PrimeNG's editor

To disable tabbing in PrimeNG's rich text editor, which uses Quill, through JavaScript, you can utilize the following code: keyboard: { bindings: { tab: false, handleEnter: { key: 13, handler: function() { ...

Is it possible for the link parameters array in Angular2 Routing to contain more than one element?

Currently delving into Angular2 on my own. According to the text I'm studying, when a user navigates to a feature linked to a route using the routerLink directive, the router employs both the link parameters array and the route configuration to constr ...

Typescript's intricate data structures

I'm looking to communicate a string in my design that includes indexes, with the possibility of ending the string with either "work" or "crash": export interface Test { date: string, 'stat.conv[index: number].key[index: number].(work || cr ...

Can you explain the purpose of typescript's tsserver?

Can you explain the role of tsserver? I understand that it assists IDEs in providing features such as error checking and auto-completion. However, I have been unable to locate any API documentation for it. ...

Is there a way to target the mat-icon element using the icon's name in CSS

I have a group of mat-icons that are automatically generated, meaning I cannot assign them ids or classes. The only way to distinguish between them is by their names: <mat-icon role="img">details</mat-icon> <mat-icon role="img ...

Type that specifically targets the 'path' property within the object

Examine this code sample: /* eslint-disable */ type Primitive = boolean | null | number | string; export type DataAddress<T> = T extends Primitive ? [T] : ObjectAddress<T>; export type ObjectAddress<T> = { [K in keyof T]: [K, ...DataA ...

Define the interface for a GraphQL resolver argument in code-first implementation

This specific GraphQL schema example from the Constructing Types page showcases how to define the Query type. // Creating the Query type var queryType = new graphql.GraphQLObjectType({ name: 'Query', fields: { user: { type: userType ...