0

我正在尝试在 Angular中渲染一个Observable 。我正在向 API 发出请求以获取一些数据，但是当我尝试渲染它时，浏览器上什么也没有出现。

这是我用来获取有关 1 个用户的数据的服务：

export class UserService {

  public _url: string = "https://url/rest/user/";

  constructor(private http: HttpClient) { }

  getUser(id): Observable<IUser>{
    return this.http.get<IUser>(this._url + id)
                  .catch(this.errorHandler);
  }

  errorHandler(error: HttpErrorResponse){
    return Observable.throw(error.message);
  }
}

这是用户组件：

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  providers: [ UserService ],
  styleUrls: ['./user.component.css']
})

export class UserComponent implements OnInit {

  public userId;    
  public errorMsg;
  user: IUser;

  constructor(private route: ActivatedRoute, private _userService: 
  UserService) { }

  ngOnInit() {

    let id = parseInt(this.route.snapshot.paramMap.get('id'));
    this.userId = id;

    this._userService.getUser(this.userId)
          .subscribe(data => this.user = data,
                 error => this.errorMsg = error);

  }

}

我用来呈现 de User的视图HTML是：

<div>
  <h2>{{user?.firstName}} {{user?.lastName}}</h2>
    <dl>
     <dt>Age:</dt>
     <dd>{{user?.age}}</dd>

     <dt>ID:</dt>
     <dd>{{user?.id}}</dd>

     <dt>Email:</dt>
     <dd>{{user?.email}}</dd>
   </dl>
</div>

在此示例中，我没有错误，但用户字段均为空，没有显示任何内容。我试过用这个：

<div *ngIf="user | async; let user; else loading">
<ng-template #loading>Loading User Data...</ng-template>

但它不起作用，控制台显示：

Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' ...

我在另一个组件中执行相同的过程，在该组件中我使用 IUser [] 之类的用户数组，这次我使用 ngfor 显示数据并且一切正确，数据按预期显示在浏览器中.. 我我以与我在上面解释的方式相同的方式进行操作，但使用 ngif 或 user?.id 且不使用数组。

4

3 回答 3

2

至于最终错误，async管道仅适用于可观察对象。因此，不要将数据保存在用户变量中，然后将其传递给异步管道，而是尝试保存可观察对象本身：const user$ = this._userService.getUser(this.userId)然后将其传递给async管道：{{ user$ | async }}。

然后，您可以像这样访问属性：{{ (user$ | async).age }}等等。

对于您的初始错误，这可能只是请求的问题。data您可以尝试在订阅中将 的值注销到控制台以进行故障排除。也许你需要data.response什么。（您可以检查这一点的一种方法是使用我上面提到的可观察方法并{{ user$ | async | json }}在您的模板中执行以查看对您的调用userService.get是什么。

请注意，虽然您可以让手动订阅正常工作，但您需要自己处理订阅的清理。async管道是这种类型的方法。

有关这方面的更多信息，请在此处查看：https ://angular.io/api/common/AsyncPipe

于 2018-02-08T18:50:06.797 回答
2

API 返回用户列表，而不是单个用户（即使您指示响应为 a IUser）

您需要进行一些映射以仅获取第一个元素：

getUser(id): Observable<IUser> {

    return this.http.get<IUser>(this._url + id).map(resp => resp[0])
                    .catch(this.errorHandler);
}

查看修改后的代码：https ://angular-uqsks5.stackblitz.io

于 2018-02-09T19:09:10.037 回答
0

首先，您需要将来自@angular/http 的响应导入到您的服务中。

import { Http, Headers, Response } from "@angular/http";

并从 rx/js 映射：

import { map } from 'rxjs/operators';

然后，在您的服务中，尝试以下操作：

return this.http.get(this._url + id).pipe(
  map((resp:Response) => resp.json())
)

这应该将您的响应映​​射到 JSON。订阅 observable 应该按照您现在在组件中的方式工作。

于 2018-02-08T18:57:55.400 回答