Angular项目中<tr>元素的*ngFor指令不生效问题求助

开发CRUD演示项目时，组件内已硬编码员工数据，但表格的<tr>行无法渲染数据，当前页面仅显示表头和空表格，效果如下：

相关代码文件 #

组件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>

组件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 {
  }

}

App模块文件（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 { }

问题原因及修复方法 #

核心错误是Angular的*ngFor指令语法使用错误：HTML模板中用了from，而正确的语法应该是of。

将表格tbody中的代码：

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

修改为：

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

修改后，Angular就能正确遍历employees数组，将数据渲染到表格行中。

内容的提问来源于stack exchange，提问作者Prashil Shah