Initialize interface type array in angular 11

Question

I have created interface with name Test in Angular 11

 export interface Test {
      id:number;
      name:string;
    }

Then I have exported the interface and create its array with name of ProvinceAllStudent

import { Test } from './../../../student/Models/test';
import { Component, OnInit } from '@angular/core';
import { Province } from 'src/app/student/Models/Province.model';
@Component({
  selector: 'app-general-statistic',
  templateUrl: './general-statistic.component.html',
  styleUrls: ['./general-statistic.component.css']
})
export class GeneralStatisticComponent implements OnInit {
Provinces:any[];
ProvinceAllStudent:Test[]=[];

  constructor(
) { }

  ngOnInit(): void {
 this.CalculateProvinceStudents()
  }
  CalculateProvinceStudents()
  {
     for(let j=0;j<5;j++)
     {
      this.ProvinceAllStudent[j].id=j;
      this.ProvinceAllStudent[j].name='A';
     }
  }

}

when I run the application I got the error

core.js:6210 ERROR TypeError: Cannot set properties of undefined (setting 'id') at GeneralStatisticComponent.CalculateProvinceStudents (general-statistic.component.ts:23)

Your loop (let j=0;j<5;j++) is going from index 0 to 4, but ProvinceAllStudent is empty. — mrak
– mrak, Commented Sep 18, 2021 at 20:12
In the body of the for loop, You should create a Test object, and then assign it to the array index: ----------> let t : Test = {id: j, name: 'A'}; this.ProvinceAllStudent[j] = t; — msd.salehi
– msd.salehi, Commented Sep 25, 2021 at 19:10

Milan Tenk · Accepted Answer · 2021-09-19 08:52:01Z

2

Because this.ProvinceAllStudent[j] is undefined and you try to assign a value to a property of it. (undefined does not have the id and name properties, so an exception is thrown.)

I suggest to use push method of the array. For example

for (let j = 0; j < 5; j++) {
  this.ProvinceAllStudent.push({ id: j, name: 'A' });
}

Or as alternative an alternative you can add elements by index this way:

for(let j = 0; j < 5; j++) {
  this.ProvinceAllStudent[j] = {id: j, name: 'A'};
}

edited Sep 19, 2021 at 8:52

answered Sep 18, 2021 at 20:16

Milan Tenk

2,7681 gold badge20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mehrab Shaida Over a year ago

but if i want to access 0 index value how i can thanks

Milan Tenk Over a year ago

this.ProvinceAllStudent[0] works, push starts to add the values from the 0th index.

Mehrab Shaida Over a year ago

Thanks for solving the problem Milan Tenk

Milan Tenk Over a year ago

I'm glad, that I could help! Please accept the answer. ;)

Mehrab Shaida Over a year ago

ok the push method will insert new item to array can you explain that if i want to insert new item in specific index of an array

|

Chris Danna · Accepted Answer · 2021-09-18 20:14:04Z

2

you need to create the object first before modifying it in the array

this.ProvinceAllStudent.push({
  id: j,
  name: 'A'
})

answered Sep 18, 2021 at 20:14

Chris Danna

1,2629 silver badges18 bronze badges

1 Comment

Mehrab Shaida Over a year ago

but I want to initial array an index base thanks

Collectives™ on Stack Overflow

Initialize interface type array in angular 11

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related