"Cannot read properties of undefined (reading 'id')" 在 Angular 中加载页面时出错

Question

我正在从 angular 中的 mockapi 服务中提取数据。我毫无问题地提取了所有数据，然后尝试使用列表中任何数据的 ID 访问数据的详细信息。我想我想要所有数据的函数稍后运行，我得到这个错误。

app.component.ts 文件

export class AppComponent implements OnInit {
  
  data:Array<any>
  userData!: User;
  
  constructor(private task: TaskService) {
    this.data = new Array<any>();
  }
  
  ngOnInit(): void {
      this.runTask();
  }

  runTask() {
    this.task.getData().subscribe((data) =>{
      this.data = data;
    });
  }

  getUserData = (id: number) => {
    if (this.runTask == null) {
      return
    }
    this.task.getUserData(id).subscribe((res: User) => {
      console.log(res);
      this.userData = res;
    })
  }
}

export interface User{
  id: number,
  name: string,
  phone: number,
  website: string,
  company: any
}

task.service 文件

export class TaskService {

  readonly URL;

  constructor(private http: HttpClient) { 
    this.URL = "https://jsonplaceholder.typicode.com/users/"
  }

  getData(): Observable<any> {
    return this.http.get(this.URL);
  }

  getUserData(id: any) {
    return this.http.get<User>(this.URL+id.id);
  }
}

截图

first load

当我点击查看按钮的时候，我想要的id里面的数据就来了。打开模态，当我关闭模态时，所有数据都已收到。

我已经研究这个问题几个小时了，但找不到解决方案。

Answer 1

id 是组件中的一个数字，但它在服务中用作对象。如下更新您的服务

  getUserData(id: number) {
    return this.http.get<User>(this.URL + id);
  }

Answer 2

您遇到的错误（我在屏幕截图中看到的）来自您的模板文件 'app.component.html' 第 90 行。您似乎正在尝试从未定义的变量（尚未加载的变量（尚未））中读取 id。

确保它已定义，例如，您可以使用 'NgIf' 测试变量是否为真，如下所示：

<div *ngIf="user">
  <span>{{user.id}}</span>&nbsp;
  <span>{{user.name}}</span>
</div>

为避免传递给方法的类型错误（如），尽量不要使用'any'关键字。

"Cannot read properties of undefined (reading 'id')" 在 Angular 中加载页面时出错

"Cannot read properties of undefined (reading 'id')" error when loading page in Angular

frontend

angular