我需要你的幫助。現在我正在嘗試處理 Angular 中的路由。我從 JSON 占位符中獲取了資料。我正在嘗試顯示用戶詳細資訊。一切都對我有用，但在控制臺中我收到此錯誤
Cannot read properties of undefined (reading 'name')
當我在檔案 user-details.component.ts 中使用管道時，一切都對我有用，我得到一個 json 物件，但是當我想從模型中輸出一個單獨的欄位時，我得到一個錯誤。模型中的資料型別對應于 json url 中的資料型別。
我究竟做錯了什么？非常感謝你
用戶.component.ts
import {IUser} from "../models/user";
import { Component, OnInit } from '@angular/core';
import {UserService} from "../services/user.service";
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
users: IUser[]
constructor(private userService: UserService) { }
ngOnInit(): void {
this.userService.getUsers().subscribe(value => this.users = value);
}
}
用戶組件.ts
import { Component, OnInit, Input } from '@angular/core';
import {IUser} from "../models/user";
import {ActivatedRoute, Router} from "@angular/router";
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
@Input()
user: IUser
constructor(private router: Router, private activatedRoute: ActivatedRoute) { }
ngOnInit(): void {}
goToDetails():void {
this.router.navigate([this.user.id],{relativeTo: this.activatedRoute, state: this.user})
}
}
用戶詳細資訊.component.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {IUser} from "../models/user";
@Component({
selector: 'app-user-details',
templateUrl: './user-details.component.html',
styleUrls: ['./user-details.component.css']
})
export class UserDetailsComponent implements OnInit {
fullUser: IUser;
constructor(private router: Router, private activatedRoute: ActivatedRoute) {
this.activatedRoute.params.subscribe(params => {
this.fullUser = this.router.getCurrentNavigation()?.extras.state as IUser
})
}
ngOnInit(): void {}
}
用戶詳細資訊.component.html
<div>
<!--{{fullUser | json}}-->
{{fullUser.name}}
</div>
uj5u.com熱心網友回復：
很可能您的 userservice 尚未回傳結果并且 fulluser 未定義。試試這個：
<div *ngIf="fullUser">
<!--{{fullUser | json}}-->
{{fullUser.name}}
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387749.html