Angular 7从API获取数据

Question

我需要使用GET方法从API获取数据。 实际上，我需要"noPage" ， "totalPage" ， "List":[]

这是API的回应

{
    "status": {
        "code": 0,
        "message": "Success."
    },
    "noPage": 5,
    "totalPage": 9,
    "List": [
        {
            "_id": "CFB2D5FFDFDADDB954404BF1B9D59844",
            "createdDate": "2019-06-25T08:42:27.799+0000",
            "createdBy": "Josh",
            "enable": "true",
            "remarks": null,
            "Id": "0044",
            "Name": "Trisya"
]

}

然后我正在使用这种方法来获取数据

服务

getService(): Observable<any>  {
    const urls: string = `http://192.168.0.101:9080/project/api/listall/${Id}`

    return this.http.get<AgentDetails>(urls).pipe(map(res => res['List']));

  }

我只有成功获取"List": []数据"List": []才没有"noPage"和"totalPage"

我需要怎么做才能获得"noPage"和"totalPage"

希望大家能帮忙

提前致谢

Answer 1

请尝试以下示例，

https://stackblitz.com/edit/angular-dljtkv

服务等级

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';

import { AgentDetails } from './agent-details';

@Injectable()
export class AgentService {

  constructor( public http: HttpClient,) { }

  getService(): Observable<AgentDetails>  {
     const urls: string = `http://192.168.0.101:9080/project/api/listall/${Id}`

    // const urls = "/assets/agent-details.json";

    return this.http.get<AgentDetails>(urls);

  }

}

组件类别

import { Component } from '@angular/core';

import {AgentService} from './agent.service';
import { AgentDetails } from './agent-details';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent   {
  name = 'Angular';

  agentDetails:AgentDetails;

  constructor(public agentService: AgentService){
      this.getAgentDetails();
  }


  getAgentDetails(){
    this.agentService.getService().subscribe(data=>{
      this.agentDetails = data;
      console.log(JSON.stringify(this.agentDetails));
    })
  }


}

模型类

import { Status } from './status';
import { Agent } from './agent';
export class AgentDetails {
  status: Status;
  noPage:number;
  totalPage:number;
  List: Agent[];

}

export class Status {

  code:number;
  message:string;
}

export class Agent {


  _id: string;
  createdDate: Date;
  createdBy: string;
  enable: boolean;
  remarks: string;
  Id: number;
  Name: string;
}

Answer 2

这是因为您仅从map函数中的对象中取出列表：

map(res => res['List']);

res['List']将仅返回List 。 如果要返回更多信息，可以使用：

map(res => {
    return {
      List: res['List'],
      noPage: res['noPage'],
      totalPage: res['totalPage']
    };
}

查看map文档以获取更多信息

Answer 3

map(res => res['List'])

这运行功能

res => res['List']

在结果上，这表明您要获取响应并仅返回属性列表。 因此，您的结果正是该map函数的工作。

摆脱地图以获取整个响应。

Answer 4

您需要做的是为您得到的响应定义一个接口。

例如定义一个这样的接口

interface UserAPIResponse {
  status: Status;
  noPage: number;
  totalPage: number;
  List: UserList[];
}

interface UserList {
  _id: string;
  createdDate: string;
  createdBy: string;
  enable: string;
  remarks?: any;
  Id: string;
  Name: string;
}

interface Status {
  code: number;
  message: string;
}

现在，您可以从响应中选择所需的属性

getService(): Observable<any>  {
    const urls: string = `http://192.168.0.101:9080/project/api/listall/${Id}`

    return this.http.get<AgentDetails>(urls).pipe(
       map(({noPage, totalPage, List} : UserAPIResponse) => {noPage, totalPage, List));

}

现在，作为响应，您将获得仅具有这三个属性的对象。

如果您想了解更多内容，请阅读有关销毁的信息。