无法读取未定义的属性（读取“名称”）Angular

Question

我需要你的帮助。现在我正在尝试处理 Angular 中的路线。我从 JSON 占位符中获取数据。我正在尝试显示用户详细信息。一切都对我有用，但在控制台中我收到此错误 Cannot read properties of undefined (reading 'name')

当我在文件 user-details.component.ts 中使用管道时，一切正常，我得到一个 json 对象，但是当我想从模型中输出一个单独的字段时，我得到一个错误。模型中的数据类型对应于 json url 中的数据类型。

我做错了什么？非常感谢

users.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);
}

}

user.component.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})
}
}

user-details.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 {}
}

user-details.component.html

<div>
<!--{{fullUser | json}}-->
{{fullUser.name}}
</div>

Answer 1

很可能您的 userservice 尚未返回结果，并且 fulluser 未定义。试试这个：

<div *ngIf="fullUser">
 <!--{{fullUser | json}}-->
 {{fullUser.name}}
</div>