Angular 2 encounters issues with *ngFor functionality

Question

Angular 2 encounters issues with *ngFor functionality

I am currently experiencing some difficulties while trying to use *ngFor to access an array of objects in Angular 2. When I define the array like this:

     employees=[ 
        {name:'a',age:'25'},
        {name:'b',age:'35'}
        ];

In my HTML template file, I have implemented *ngFor statements as follows:

        <ul>
         <li *ngFor="let employee of employees ; let i = index;">
           {{name}}
        </li>
       </ul>

However, upon checking the browser console, it is showing errors similar to the following (sample plunker available at http://plnkr.co/edit/0cBHaDM1mHvMf38NtQ7X?p=preview):

Error: Uncaught (in promise): Error: Error in :0:0 caused by: Array[2] is not a constructor TypeError: Array[2] is not a constructor at new AppComponent () at new Wrapper_AppComponent

As a newcomer to Angular 2, any guidance or support on resolving this issue would be highly appreciated.

angular typescript angular2-ngfor

Answer 1

Answer №1

Errors

The markup in index.html was used incorrectly.
employees= new Array[2]; is not the correct way to initialize an Array.
names = new Array('qw','er'); is invalid.
Values were not assigned using a constructor (which is considered bad practice).

To fix your code, it should look like this:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hellotest {{name}}</h1>
  <ul>
         <li *ngFor="let name of names ; let j = index;">
           {{name}}
           </li>
       </ul>
        <ul>
         <li *ngFor="let employee of employees ; let i = index;">
           {{employee.name}}
        </li>
       </ul>
       `
})
export class AppComponent { 
  name = 'Angular';
  employees= new Array();
  names = new Array();
  constructor(){
    this.employees=[ 
      {name:'a',age:'25'},
      {name:'b',age:'35'}
    ];
  
    this.names=['qw','er'];
    console.log(this.employees);
    console.log(this.names);
  }
}

Plunker with Updates

If you prefer not to use a constructor, declare variables like this:

name = 'Angular';
employees:any[]= [ 
  {name:'a',age:'25'},
  {name:'b',age:'35'}
];
names:Array<string> = ['qw','er'];

Plunker without Constructor

Answer 2

Errors

The markup in index.html was used incorrectly.
employees= new Array[2]; is not the correct way to initialize an Array.
names = new Array('qw','er'); is invalid.
Values were not assigned using a constructor (which is considered bad practice).

To fix your code, it should look like this:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hellotest {{name}}</h1>
  <ul>
         <li *ngFor="let name of names ; let j = index;">
           {{name}}
           </li>
       </ul>
        <ul>
         <li *ngFor="let employee of employees ; let i = index;">
           {{employee.name}}
        </li>
       </ul>
       `
})
export class AppComponent { 
  name = 'Angular';
  employees= new Array();
  names = new Array();
  constructor(){
    this.employees=[ 
      {name:'a',age:'25'},
      {name:'b',age:'35'}
    ];
  
    this.names=['qw','er'];
    console.log(this.employees);
    console.log(this.names);
  }
}

Plunker with Updates

If you prefer not to use a constructor, declare variables like this:

name = 'Angular';
employees:any[]= [ 
  {name:'a',age:'25'},
  {name:'b',age:'35'}
];
names:Array<string> = ['qw','er'];

Plunker without Constructor

Answer 3

Answer №2

Kindly update your design to the following:

<ul>
   <li *ngFor="let employee of employees ; let i = index;">
      {{employee.name}}
   </li>
</ul>

The 'employee' variable represents each element in your array. To retrieve the name property for each object, you will need to access it accordingly.

Answer 4

Kindly update your design to the following:

<ul>
   <li *ngFor="let employee of employees ; let i = index;">
      {{employee.name}}
   </li>
</ul>

The 'employee' variable represents each element in your array. To retrieve the name property for each object, you will need to access it accordingly.

Angular 2 encounters issues with *ngFor functionality

Answer №1

Answer №2

Similar questions

Is there a way to make Typescript accept dot notation?

Components in Angular do not refresh after using router.navigate

Retrieve values of properties from an array

Is there a way to specify the login response details when making an Angular API request?

Steps for numbering a list with multiple ngfors within a div using Angular

Passing HTML content to an ng-bootstrap modal in Angular 2+

send information from a service's observable method to an unrelated component

What is the best way to transpile TypeScript within the Astro framework?

Having trouble with Nestjs Global Validation Pipe when parsing Boolean query parameters?

Extract the JSON array data from the Service and process it within the Component

Ways to access details on the rejection process within a Prisma.$transaction

What is the timing for the execution of top-level non-export code in TypeScript?

Changes are made to the Angular template-driven form after certain controls have been added or removed

Struggling to access the html elements within a component once the ng2 page has finished loading?

What sets apart `const [a, b, c] = array;` from `const {a, b, c} = array;`?

What is the suggested method for supplying optional parameters to a callback as outlined in the Typescript documentation?

Ionic 4 and RxJS 6: Issue with Ionic-native HTTP get method not fetching data as expected

In search of assistance with implementing Google Maps navigation into an Ionic 2 application

Encountering a duplication issue when redirecting components in Angular2/TypeScript using navigateByUrl

Can someone show me how to handle a GET response in Angular 8?