无法读取未定义的 属性 'id' 导航至 Angular 中具有 ID 的路由
Cannot read property 'id' of undefined while navigate to route with ID in Angular
我在使用路由器时无法导航到带有 ID 参数的路由。
我的代码如下:
应用-routing.module.ts:
const routes: Routes = [
{path:"departments", component:DepartmentsComponent},
{path:"departments/:id", component:DepartmentsDetailsComponent}
];
Departments.components.html:
<ul class="items">
<li (click)="onSelect(depart)" *ngFor="let dept of departmentsList">
<span class="badge">{{ dept.id }}</span> {{ dept.department }}
</li>
</ul>
Departments.components.ts:
export class DepartmentsComponent implements OnInit {
departmentsList = [
{ "id":1, "department": "Angular" },
{ "id":2, "department": "React Js" },
{ "id":3, "department": "Node Js" },
{ "id":4, "department": "Express Js" },
{ "id":5, "department": "MOngo DB" }
];
constructor(private router: Router) { }
ngOnInit() {
}
onSelect(depart){
this.router.navigate(['/departments',depart.id]);
}
}
导致错误:
ERROR: TypeError: **Cannot read property 'id' of undefined**
at DepartmentsComponent.onSelect (departments.component.ts:25)
at Object.eval [as handleEvent] (DepartmentsComponent.html:3)
at handleEvent (core.js:38098)
at callWithDebugContext (core.js:39716)
at Object.debugHandleEvent [as handleEvent] (core.js:39352)
at dispatchEvent (core.js:25818)
at core.js:37030
at HTMLLIElement.<anonymous> (platform-browser.js:1789)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
发生这种情况是因为您在 onSelect(depart)
中传递了 depart,这是未定义的。要传递的正确值是 dept 派生自 *ngFor
.
改变
<ul class="items">
<li (click)="onSelect(depart)" *ngFor="let dept of departmentsList">
<span class="badge">{{ dept.id }}</span> {{ dept.department }}
</li>
</ul>
到
<ul class="items">
<li (click)="onSelect(dept)" *ngFor="let dept of departmentsList">
<span class="badge">{{ dept.id }}</span> {{ dept.department }}
</li>
</ul>
我在使用路由器时无法导航到带有 ID 参数的路由。
我的代码如下:
应用-routing.module.ts:
const routes: Routes = [
{path:"departments", component:DepartmentsComponent},
{path:"departments/:id", component:DepartmentsDetailsComponent}
];
Departments.components.html:
<ul class="items">
<li (click)="onSelect(depart)" *ngFor="let dept of departmentsList">
<span class="badge">{{ dept.id }}</span> {{ dept.department }}
</li>
</ul>
Departments.components.ts:
export class DepartmentsComponent implements OnInit {
departmentsList = [
{ "id":1, "department": "Angular" },
{ "id":2, "department": "React Js" },
{ "id":3, "department": "Node Js" },
{ "id":4, "department": "Express Js" },
{ "id":5, "department": "MOngo DB" }
];
constructor(private router: Router) { }
ngOnInit() {
}
onSelect(depart){
this.router.navigate(['/departments',depart.id]);
}
}
导致错误:
ERROR: TypeError: **Cannot read property 'id' of undefined**
at DepartmentsComponent.onSelect (departments.component.ts:25)
at Object.eval [as handleEvent] (DepartmentsComponent.html:3)
at handleEvent (core.js:38098)
at callWithDebugContext (core.js:39716)
at Object.debugHandleEvent [as handleEvent] (core.js:39352)
at dispatchEvent (core.js:25818)
at core.js:37030
at HTMLLIElement.<anonymous> (platform-browser.js:1789)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
发生这种情况是因为您在 onSelect(depart)
中传递了 depart,这是未定义的。要传递的正确值是 dept 派生自 *ngFor
.
改变
<ul class="items">
<li (click)="onSelect(depart)" *ngFor="let dept of departmentsList">
<span class="badge">{{ dept.id }}</span> {{ dept.department }}
</li>
</ul>
到
<ul class="items">
<li (click)="onSelect(dept)" *ngFor="let dept of departmentsList">
<span class="badge">{{ dept.id }}</span> {{ dept.department }}
</li>
</ul>