TS2339: The specified property is not present on the Angular type

Question

TS2339: The specified property is not present on the Angular type

Hey everyone, I've recently embarked on my Angular learning journey.

Unfortunately, I'm currently facing this Error:

32  this.warning.error.push(entry.name+': '+entry.error);
                 ~~~~~
src/app/dashboard/dashboard.component.ts:33:15 - error TS2339: Property 'id' does not exist on type 'Warning[]'.

33  this.warning.id.push(entry.id);
                 ~~
src/app/dashboard/dashboard.component.ts:37:13 - error TS2339: Property 'error' does not exist on type 'Error[]'.

37  this.error.error.push(entry.name+': '+entry.error);
               ~~~~~
src/app/dashboard/dashboard.component.ts:38:13 - error TS2339: Property 'id' does not exist on type 'Error[]'.

38  this.error.id.push(entry.id);
               ~~

The issue lies in the fact that I have defined Interfaces for both of them and have imported them as well.

export interface Error {
        id: number;
        error: string;
        }

export interface Warning {
        id: number;
        error: string;
        }

You can see how they are implemented in my component below.

import { Error, Warning } from '../dashboard';
...
export class DashboardComponent implements OnInit {
 error: Error[];
 warning: Warning[];
...

evaluate(): void{
        for (let entry of this.status){
        if (entry.status === 0){
                this.ok = this.ok + 1;
                }
        if (entry.status === 1 && entry.value < 8){
        this.warnings = this.warnings + 1;
        this.warning.error.push(entry.name+': '+entry.error);
        this.warning.id.push(entry.wt_id);
                }
        if (entry.status === 1 && entry.value >= 8){
        this.critical = this.critical + 1;
        this.error.error.push(entry.wt_name+': '+entry.error);
        this.error.id.push(entry.wt_id);
                }
        }
}

I have tried various methods mentioned in previous posts but to no avail.

If any of you have a solution or spot a mistake, I would greatly appreciate your input. Maybe it's just something small that slipped my notice.

Cheers!

angular typescript

Answer 1

Answer №1

Make sure you are pushing values to the properties within the member variables error and warning, not directly to the variables themselves.

To resolve this, consider changing the type definitions to arrays.

Interfaces

export interface Error {
  id: number[];
  error: string[];
}

export interface Warning {
  id: number[];
  error: string[];
}

Component

export class DashboardComponent implements OnInit {
  error: Error;
  warning: Warning;
 
  ...
}

Alternatively, initialize the arrays and push values to the member variables as suggested by @GunnerB.

Interfaces

export interface Error {
  id: number;
  error: string;
}

export interface Warning {
  id: number;
  error: string;
}

Component

export class DashboardComponent implements OnInit {
  error: Error[] = [];              // <-- ensure arrays are initialized
  warning: Warning[] = [];
  ...

  evaluate(): void {
    for (let entry of this.status) {
      if (entry.status === 0) {
        this.ok = this.ok + 1;
      }
      if (entry.status === 1 && entry.value < 8) {
        this.warnings = this.warnings + 1;
        this.warning.push({id: entry.wt_id, error: entry.name + ': ' + entry.error });
      }
      if (entry.status === 1 && entry.value >= 8) {
        this.critical = this.critical + 1;
        this.error.push({id: entry.wt_id, error: entry.name + ': ' + entry.error });
      }
    }
  }
}

Answer 2

Make sure you are pushing values to the properties within the member variables error and warning, not directly to the variables themselves.

To resolve this, consider changing the type definitions to arrays.

Interfaces

export interface Error {
  id: number[];
  error: string[];
}

export interface Warning {
  id: number[];
  error: string[];
}

Component

export class DashboardComponent implements OnInit {
  error: Error;
  warning: Warning;
 
  ...
}

Alternatively, initialize the arrays and push values to the member variables as suggested by @GunnerB.

Interfaces

export interface Error {
  id: number;
  error: string;
}

export interface Warning {
  id: number;
  error: string;
}

Component

export class DashboardComponent implements OnInit {
  error: Error[] = [];              // <-- ensure arrays are initialized
  warning: Warning[] = [];
  ...

  evaluate(): void {
    for (let entry of this.status) {
      if (entry.status === 0) {
        this.ok = this.ok + 1;
      }
      if (entry.status === 1 && entry.value < 8) {
        this.warnings = this.warnings + 1;
        this.warning.push({id: entry.wt_id, error: entry.name + ': ' + entry.error });
      }
      if (entry.status === 1 && entry.value >= 8) {
        this.critical = this.critical + 1;
        this.error.push({id: entry.wt_id, error: entry.name + ': ' + entry.error });
      }
    }
  }
}

Answer 3

Answer №2

Could you please update to: `this.warning.error = entry.wt_name + ': ' + entry.error;

error within the Warning interface should be a string and not an array.

Answer 4

Could you please update to: `this.warning.error = entry.wt_name + ': ' + entry.error;

error within the Warning interface should be a string and not an array.

TS2339: The specified property is not present on the Angular type

Answer №1

Answer №2

Similar questions

The repository injected into NestJs using TypeORM suddenly becomes null

Make sure that the correct type of 'this' is recognized

Reference loss occurs in Angular Ionic when using @ViewChild

typescript error is not defined

What steps should I take in order to correctly implement the onChange event and retrieve the event.target.value in my

When a URL is entered, information is not retrieved from the database

Get access to documents via angular2 - ionic 2

magnify within a div with a set width

Anticipated that 'styles' would comprise an array of strings in Angular2

An ambient module will not be successfully resolved through a relative import operation

Encountered an error while using npm install --legacy-peer-deps: Debug Failure. SyntaxKind: Unknown went unhandled

Is it possible to use Angular *ngIf on a component while also binding ngStyle to a method

Populate Textboxes with Database Data when Textbox Value is Updated

Is it possible to pass generics into a Promise, such as Promise<T>?

Customizable TypeScript interface with built-in default key value types that can be easily extended

What could be preventing a button click from happening when using TypeScript?

Efficient configuration for pnpm monorepo with TypeScript, vite, and rollup

Leverage the power of ssh2-promise in NodeJS to run Linux commands on a remote server

You need to have an Angular project in order to use the serve command, however, the project definition could

The Ins and Outs of Selecting the Correct Module to Attach a Controller in NestJS CLI