Angular 错误类型错误：无法读取属性'；id'；在DepartmentListComponent_li_3_模板（department list.component.ts:12）处的未定义角度

我最近开始学习angular，并遵循本教程，学习angular中的布线参数

我被这个错误缠住了，当然谷歌搜索了一下，但没有找到解决办法

以下是文件：

部门列表.组件.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-department-list',
  template: `
    <h3>
      department-list works!
    </h3>
    
    <ul>
      <li *ngFor="let deparment of departments">
        <span>{{department.id}}</span>{{department.name}}
      </li>
    </ul>
  `,
  styles: [
  ]
})

export class DepartmentListComponent implements OnInit {

  constructor() { }

  departments = [
    {"id":1,"name":"Angular"},
    {"id":2,"name":"Node"},
    {"id":3,"name":"MongoDB"},
    {"id":4,"name":"Ruby"},
    {"id":5,"name":"Bootstrap"}    
  ]

  ngOnInit() {
  }
}

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

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentListComponent } from './department-list/department-list.component';
import {EmployeeListComponent} from './employee-list/employee-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/departments', pathMatch: 'full'},
  { path: 'departments', component:DepartmentListComponent},
  { path: 'employees', component:EmployeeListComponent},
  { path: "**", component:PageNotFoundComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }
export const routingComponents = [DepartmentListComponent, 
                                  EmployeeListComponent,
                                   PageNotFoundComponent];

应用程序路由.module.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-department-list',
  template: `
    <h3>
      department-list works!
    </h3>
    
    <ul>
      <li *ngFor="let deparment of departments">
        <span>{{department.id}}</span>{{department.name}}
      </li>
    </ul>
  `,
  styles: [
  ]
})

export class DepartmentListComponent implements OnInit {

  constructor() { }

  departments = [
    {"id":1,"name":"Angular"},
    {"id":2,"name":"Node"},
    {"id":3,"name":"MongoDB"},
    {"id":4,"name":"Ruby"},
    {"id":5,"name":"Bootstrap"}    
  ]

  ngOnInit() {
  }
}

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

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentListComponent } from './department-list/department-list.component';
import {EmployeeListComponent} from './employee-list/employee-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/departments', pathMatch: 'full'},
  { path: 'departments', component:DepartmentListComponent},
  { path: 'employees', component:EmployeeListComponent},
  { path: "**", component:PageNotFoundComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }
export const routingComponents = [DepartmentListComponent, 
                                  EmployeeListComponent,
                                   PageNotFoundComponent];

---

只是有点打字错误

<li *ngFor="let deparment of departments">
        <span>{{department.id}}</span>{{department.name}}
      </li>

{{department.id}{{department.name}

---

当您使用

t

访问

department

时，您的迭代对象是

department

（不带

t

）。只需将

t

添加到您的迭代对象中

谢谢您的时间