ngFor ne fonctionne pas sur l'élément <tr> de mon projet angulaire

Question

Je travaille sur un projet CRUD de démonstration et j'ai demandé les sections de mon composant où j'ai codé en dur les données des employés. Je ne suis pas en mesure de recevoir les données dans les lignes du tableau. Je ne vois pas ce qui fait que cela ne fonctionne pas.

Modèle de composant Html (employees-list.component.html)

    <div class="container my-5">
      <h1 class="mb-5">Employees</h1>

      <table class="table" *ngIf="employees.length > 0">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Salary</th>
            <th>Department</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let emp from employees">
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.email}}</td>
            <td>{{emp.phone}}</td>
            <td>{{emp.salary}}</td>
            <td>{{emp.department}}</td>

          </tr>
        </tbody>
      </table>

      <p *ngIf="employees.length <= 0">No employees found</p>
    </div>

Modèle de composant ts (employees-list.component.ts)

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

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

      employees: Employee[] = [
        {
          id: 1,
          name: 'John Doe',
          email: 'john.doe@mail.com',
          phone: 1234567890,
          salary: 100000,
          department: 'IT'
        },
        {
          id: 2,
          name: 'Bob Builder',
          email: 'bob.build@mail.com',
          phone: 2345678901,
          salary: 200000,
          department: 'HR'
        },
        {
          id: 3,
          name: 'Phineas Ferb',
          email: 'phineas.ferb@mail.com',
          phone: 3456789012,
          salary: 300000,
          department: 'Scientist'
        },
        {
          id: 4,
          name: 'Nobita Nobi',
          email: 'nobita.nobi@mail.com',
          phone: 4567890123,
          salary: 400000,
          department: 'Marketing'
        }
      ];
      constructor() { }

      ngOnInit(): void {
      }

    }

Fichier du module de l'application (app.module.ts)

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { EmployeesListComponent } from './components/employees/employees-list/employees-list.component';
    import { HttpClientModule } from '@angular/common/http';

    @NgModule({
      declarations: [
        AppComponent,
        EmployeesListComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Ci-dessous, vous pouvez voir que je ne suis pas en mesure d'obtenir des données dans les lignes du tableau.

Answer 1

Vous avez une coquille.

Vous avez nommé votre variable employee dans le .ts mais vous y accédez en tant que employees dans le modèle.

Alors, changez votre .ts comme ceci :

employees: Employee[] = [...];

Vous devez également utiliser of au lieu de from dans le modèle :

<tr *ngFor="let emp of employees">

Answer 2

Au lieu de cela, il devrait être *ngFor avec de .

<tr *ngFor="let emp of employee">
  ...
</tr>

Démo @ StackBlitz