Json 如何使用严格类型转换查询RESTAPI

我无法解析API的输出（项目数组在属性

结果

中）。因为TS说

结果

不是

项目

类的属性

项目类别：

export class Project {
  project_id: string;
  project_name: string;
  project_code: string;
  project_lead: string;
  project_cost_center: number;
  project_number: string;
  budget: number;
  team: string;
  provision: boolean;
  project_groups: any;
  project_networks: any;
  applications: any;
  project_environments: any;
  subscription: string;
  created_at: string;
}

API响应示例：

{
    "count": 1,
    "next": null,
    "previous": null,
    "results": [
        {
            "url": "http://localhost:8000/api/v1/projects/COA/",
            "project_id": 57,
            "project_name": "Compliance Application",
            "project_code": "COA",
            "project_lead": "John Doe",
            "project_cost_center": "9005",
            "project_number": "900512I320",
            "budget": 600.0,
            "team": "http://localhost:8000/api/v1/teams/TTA/",
            "provision": true,
            "project_groups": [],
            "project_networks": [
                "http://localhost:8000/api/v1/ip-network/23/"
            ],
            "applications": [
                "http://localhost:8000/api/v1/applications/COA/"
            ],
            "project_environments": [
                "http://localhost:8000/api/v1/environments/8/",
                "http://localhost:8000/api/v1/environments/7/"
            ],
            "subscription": "http://localhost:8000/api/v1/subscriptions/128a4bb5-604d-11e9-86ee-88e9fe8080e6/",
            "created_at": "2019-04-16T13:37:05.293000Z"
        }
    ]
}

这就是我正在使用的：

Angular CLI: 8.0.1
Node: 12.4.0
OS: darwin x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cli                      8.0.1
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

我的初始函数如下所示：

// HttpClient API get() method => Fetch project list
  getProjects(): Observable<Project[]> {
    return this.http.get<Project[]>(this.apiURL + '/projects')
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }

然后我收到一条消息，说类

项目

没有属性

json（）

。这是因为我将

.get（）

方法键入

项目[]

？如果是，我应该如何打字

---

我希望能正确地进行类型转换，但我对Angular还是相当陌生，文档也没有帮助。

问题可能是您的API没有返回项目数组。它的结构可能不同（类似于APIResponse）。但是在您的方法中，您希望返回一个项目数组

如果问题是这样的，那么您应该编写这样的代码

// HttpClient API get() method => Fetch project list
  getProjects(): Observable<Project[]> {
    return this.http.get<APIResponse>(this.apiURL + '/projects')
      .pipe(
        map(data => data.results),
        retry(1),
        catchError(this.handleError)
      )
  }

export class APIResponse {   
  count: number;
  next: any;
  previous: any;  
  results: Project[];
}

---

如果您希望得到一个

项目列表

，那么您的数据中已经有了它，因为您键入的

是
项目[]
，这会产生一个
项目数组

使用数据，您可以执行诸如
data.length
之类的操作，以查看您拥有的
Project
记录的数量。这是基本的数组操作

在
数组
上没有
.results
。您只需
console.log（data）
即可查看整个
阵列
并使用它
data.forEach（）
遍历数组中的每个
项目。您可以将它传递给一个
*ngFor=“let project of projects”
，它将为您遍历
数组。
API不会返回
project
数组，您有两种解决方案：

第一个解决方案，不要使用类型化响应：

getProjects(): Observable<Project[]> {
  return this.http.get(this.apiURL + '/projects')
    .pipe(
      map(data => data.results),
      retry(1),
      catchError(this.handleError)
    );
}

getProjects（）：可观察{
返回this.http.get（this.apirl+'/projects'）
.烟斗(
映射（data=>data.results），
重试（1），
catchError（this.handleError）
);
}

第二种解决方案，使用键入的响应：

现在，HttpClient.get（）返回类型化HttpResponse的可观察值，而不仅仅是JSON数据

导出接口ApiProjectResponse{
计数：数字；
下一步：任何；
以前：任何；
结果：项目[]；
}
getProjects（）：可观察{
//HTTP GET/projects返回ApiProjectResponse
返回this.http.get（this.apirl+'/projects'）
.烟斗(
映射（data=>data.results），
重试（1），
catchError（this.handleError）
);
}
HttpClient.get（）自动应用res.json（）并返回。您不再需要自己调用此函数。即使这样，
data.results
也不起作用，因为我相信它将
get（）
的输出视为类型
Project[]
。我是否应该将
get（）
键入其他内容？能否显示您的
项目
定义？它是
接口
还是
类
？
.json（）
在类型
HttpResponse
上确实不存在。我更新了问题以显示项目类和API响应格式。不，你不知道他的
项目
是什么样子。你只是在毫无头绪地说话。这并没有添加任何内容。@Bjorn'Bjourn的-据我所知，他的API没有返回数组，但他想返回一个数组。如果是这样的话，这不是一个真正的角度问题，是吗？但即使在这种情况下，我们也需要他的服务器提供一个示例响应，然后才能开始给出正确的答案，而不是猜测或假设。事实上，JSON响应中的属性
results
，有一系列项目。我认为这个答案是正确的，因为我需要一个类型化方法。请注意，APIResponse的类定义不正确，因为您使用的是逗号而不是分号。
getProjects(): Observable<Project[]> {
  return this.http.get(this.apiURL + '/projects')
    .pipe(
      map(data => data.results),
      retry(1),
      catchError(this.handleError)
    );
}

export interface ApiProjectResponse {   
  count: number;
  next: any;
  previous: any;
  results: Project[];
}

getProjects(): Observable<Project[]> {
  // HTTP GET /projects returns an ApiProjectResponse
  return this.http.get<ApiProjectResponse>(this.apiURL + '/projects')
    .pipe(
      map(data => data.results),
      retry(1),
      catchError(this.handleError)
    );
}