首页 > 解决方案 > 从映射和管道 HTTP 响应到专用对象访问 Angular 中的特定属性

问题描述

我是 Angular 和 TypeScript 的新手,但我正在尝试编写应用程序,它将根据从 REST 服务检索到的响应进行一些操作。

我决定使用ng-swagger-gen从我的 REST API 生成服务和模型。模型被创建为接口dummy-response.ts

export interface DummyResponse {

   name?: string;
   order?: number;
}

Service dummy-service.ts有两种方法:

getDummyResponse(): __Observable<__StrictHttpResponse<DummyResponse>> {
  // some code with headers, params etc...
  return this.http.request<any>(req).pipe(
    __filter(_r => _r instanceof HttpResponse),
    __map((_r) => {
      return _r as __StrictHttpResponse<DummyResponse>;
    })
  );
}

getDummy(): __Observable<DummyResponse> {
  return this.getDummyResponse().pipe(
   __map(_r => _r.body as DummyResponse)
  );
}

现在在我的另一堂课中,我正在尝试访问“名称”字段并使用它执行一些操作。但是我在访问这个值时遇到了问题:

private resp: DummyResponse;

constructor(private dummyService: DummyService) {}

getName() {
  this.dummyService.getDummy().subscribe(data => {
    let json = JSON.stringify(data);
    this.resp = data;
    console.log(json); // {"dummyResponse":{"name":"default","order":1}}
    console.log(this.resp); // {dummyResponse: {…}}
                            //  > dummyResponse: {name: "default", order: 1}
                            //  > __proto__: Object
    console.log(this.resp.name); // undefined
    console.log(this.resp.dummyResponse.name); // default
  });
}

如何将此数据正确映射到DummyResponse对象并访问其字段之一?即使最后一个控制台打印了正确的值,Angular 也会抛出关于DummyResponse类型不存在属性的错误(这是正确的)。但我不明白为什么data不是真正的DummyResponse,甚至 Visual Studio Code 都说 data 是DummyResponse的类型。

我在这里缺少什么?有人可以解释一下发生了什么吗?

标签: jsonangulartypescript

解决方案


推荐阅读