时间戳

首页 > 解决方案 > 当使用帮助服务访问我的 API 以检索 1 条记录时，我得到空值并且没有显示任何内容

angular - 当使用帮助服务访问我的 API 以检索 1 条记录时，我得到空值并且没有显示任何内容

问题描述

我正在学习 Angular 和 .Net Core，为了尝试简化我的代码，我决定使用帮助服务来保存将在多个组件中使用的 API 调用。

当我尝试检索所有记录时，它可以正常工作，但是当我尝试使用相同的过程来检索 1 条记录时，我得到控制台错误并且我正在使用的对象返回为空。

以下是我检索所有记录时的工作方法代码：

用户组件

getUsers() {
  this.selectedUser = null;
  this.hasSelectedUser = false;
  this.helper.getUsers((data: any) => { this.users = data; });
}

助手服务

private getUsersRequest(): Observable<any> {
  return this.http.get(this.baseUrl + 'users');
}

public getUsers(callback: any ) {
  this.getUsersRequest().subscribe(response => {
    this.users = response;
    this.users.sort((a: any, b: any) => {
      return a.firstName.localeCompare(b.firstName);
    });
    callback(this.users);
  }, error => {
    console.log(error);
  });
}

上面的效果很好，但下面的不行：

用户组件

getDetails(userId: number) {
  this.helper.getUser((data: any) => { this.selectedUser = data; }, userId);
}

用户 ID 来自网页中选择的用户。

帮手服务

private getUserRequest(id: number): Observable<any> {
  return this.http.get(this.baseUrl + 'users/' + id);
}

public getUser(callback: any, id: number ) {
  this.getUserRequest(id).subscribe(response => {
    this.user = response;
    callback(this.user);
  }, error => {
    console.log(error);
  });
}

我可以看到，当我从帮助服务中控制台记录用户对象时，帮助服务检索数据，但似乎没有任何东西通过组件。

注意：如果我不使用帮助服务来检索单个记录，它可以正常工作，但我想尽可能使用帮助服务

标签： angulartypescript

解决方案

我不知道这是否可以解决您的问题，但是您应该使用 observables 而不是回调函数，所以这个

public getUser(callback: any, id: number ) {
  this.getUserRequest(id).subscribe(response => {
    this.user = response;
    callback(this.user);
  }, error => {
    console.log(error);
  });
}

变成这个

public getUser(id: number): Observable<any> {
        return this.getUserRequest(id).pipe(
            map(response => {
                this.user = response;
                return response;
            })
        );
    }

和这个

getDetails(userId: number) {
  this.helper.getUser((data: any) => { this.selectedUser = data; }, userId);
}

应该变成这个

getDetails(userId: number) {
  this.helper.getUser(userId).subscribe((data: any) => { this.selectedUser = data});
}

推荐阅读