时间戳

首页 > 解决方案 > 错误类型错误：无法在 DepartmentListComponent_li_3_Template (department-list.component.ts:12) 处读取未定义角度的属性“id”

angular - 错误类型错误：无法在 DepartmentListComponent_li_3_Template (department-list.component.ts:12) 处读取未定义角度的属性“id”

问题描述

我最近开始学习 Angular 并遵循本教程https://www.youtube.com/watch?v=qh5nHv-4aw0&list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ&index=25关于Angular 中的路由参数

我被这个错误困住了，当然用谷歌搜索了它，但没有得到解决方案。

以下是文件：

部门列表.component.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() {
  }
}

app.module.ts

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

应用程序路由.module.ts

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];

标签： angulartypescriptangular10

解决方案

这只是一个小错字。

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

当您访问（使用）时，您的 iteratee 对象是deparment（没有）。只需添加到您的迭代对象tdepartmenttt

推荐阅读