Angular Iterate over an array of object and display its data

user_15766093 0
Viewed 475

I am trying to iterate over employeeList and display its data. This is the ts file.::

import { Component, OnInit } from '@angular/core';
import { Employee } from '../Employee';


@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  employeeList:Employee[]=
  [
    {
    id:1,
    name:"abc def",
    salary:20000,
    permanent:true,
    department:{id:1, name:"Payroll"},
    skill:[{id:1 , value:"HTML"},{id:2 , value:"CSS"},{id:1 , value:"JS"}],
    dateOfBirth:new Date('01/03/2002')
    },
    {
    id:1,
    name:"ssss gggg",
    salary:40000,
    permanent:false,
    department:{id:2, name:"Internal"},
    skill:[{id:1 , value:"HTML"},{id:2 , value:"CSS"},{id:1 , value:"JS"}],
    dateOfBirth:new Date('21/03/2006')
    },
    {
    id:1,
    name:"asdf zxcv",
    salary:60000,
    permanent:true,
    department:{id:3, name:"HR"},
    skill:[{id:1 , value:"HTML"},{id:2 , value:"CSS"},{id:1 , value:"JS"}],
    dateOfBirth:new Date('16/05/2010')
    }
  ];

}

This is the interface I am implementing:

export interface Employee{
    id:number;
    name:string;
    salary:number;
    permanent:boolean;
    department:{id:number,name:string};
    skill:[{id:number,value:string},{id:number,value:string},{id:number,value:string}];
    dateOfBirth:Date
}

And this is my html file in which I display the data:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <b>Employees List</b>
    <br>
    <br>

    <div>
        <label for="search">Search</label>
        <input type="text" id="search" placeholder="Find by name">
    </div>

    *ngFor="let e in employeeList"
        <b>{{e.name}}</b>
        <b>{{e.salary}}</b>
    
</body>
</html>

I am getting an error which says :

Property 'e' does not exist on type 'EmployeeListComponent'.

21 {{e.name}}

What am I doing wrong??

angular
2 Answers

Your HTML is not valid. I suggest you to read more here.

A valid HTML should be something like this:

<li *ngFor="let e of employeeList"> 
    <b>{{e.name}}</b>
    <b>{{e.salary}}</b>
</li>

PS: Your HTML doesn't looks like an Angular component. Before continue, read some of the fundamentals about How to write components in Angular here.

user_64428410

it's because your *ngFor directive is not attached to an html element.

You can attach it to a div for example :

<div *ngFor="let e in employeeList">
  <b>{{e.name}}</b>
  <b>{{e.salary}}</b>
</div>

or if you don't want to create a visible element you can make use of ng-container :

<ng-container *ngFor="let e in employeeList">
  <b>{{e.name}}</b>
  <b>{{e.salary}}</b>
</ng-container>

By the way your not supposed to put all html tag like head/body in your components templates, you need it only in index.html file

user_54030800
Related