Angular GET返回Object而不是Array

Question

在使用Angular的REST API时，我的GET请求返回一个对象。我希望有一个数组，这样我就可以使用属性绑定对内容进行切片和显示。

我觉得解决方案涉及到'map‘函数，但之前的尝试导致每个字段(!)的每个字母都有一个key:value对。

我尝试过在超文本标记语言中使用KeyValuePipe，但是什么也没有发现，我不确定哪里出了问题。

是否可能我的.ts没有返回任何值？？

我的component.ts代码：

  fetchForceDetail(){
    this.http
    .get<ForceDetail[]>('https://data.police.uk/api/forces/' + bedfordshire)
    .subscribe(forcedetails => {
      console.log(forcedetails);
      return forcedetails;
  });}

我的html：

<div class="col-xs-12" *ngFor="let item of forcedetails | keyvalue">
  {{item.key}}:{{item.value}}
</div>

返回的对象：

{
  "description": "<p>Bedfordshire Police is dedicated to protecting people and fighting crime together.</p>\n\n<p>At 477 square miles and with 664,500 people Bedfordshire is one of England’s smallest, yet most diverse, counties and faces complex crime challenges more usually seen in large metropolitan cities.</p>\n\n<p>More than half of its residents live in its largest towns, Luton and Bedford, which have diverse and often transient communities, alongside smaller market towns and rural parishes.</p>\n\n<p>Bedfordshire is a hub of transport link with London Luton Airport, the UK’s fifth busiest, the M1 and A1(M)motorways which traverse the county, and two principle railway lines that connect people with the heart of London in less than an hour.</p>\n\n<p>Bedfordshire has a complex mix of volume crime, serious crimes, drugs, gangs and terrorism threats.Every day our officers meet threats, harm and risks like those in large cities.</p>\n\n<p>Despite our relatively small size, we lead joint protective services which include Armed Policing, Dogs, Roads Policing and the Major Crime, for Bedfordshire, Cambridgeshire and Hertfordshire and are the lead force for the Eastern Region Special Operations Unit – a co - ordinated approach from seven forces in the region to tackle serious and organised crime and terrorism.</p>",
  "url": "http://www.bedfordshire.police.uk",
  "engagement_methods": [
    {
      "url": "https://www.bedfordshire.police.uk/",
      "type": null,
      "description": "<p>Latest news, information about crime, crime reduction advice and information about your area can be found on our website.<br />We offer a range of online services for reporting crime and suspicious activity, requesting information, giving feedback and applying for jobs.See our website for details of all our online services.</p>",
      "title": "Bedfordshire Police"
    },
    {
      "url": "http://www.facebook.com/bedspolice",
      "type": null,
      "description": "<p>Bedfordshire Police on Facebook</p>",
      "title": "Bedfordshire Police on Facebook"
    },
    {
      "url": "http://twitter.com/bedspolice",
      "type": null,
      "description": "<p>Bedfordshire Police on Twitter</p>",
      "title": "Bedfordshire Police on Twitter"
    },
    {
      "url": "http://www.youtube.com/bedfordshirepolice",
      "type": null,
      "description": "<p>Bedfordshire Police on YouTube</p>",
      "title": "Bedfordshire Police on YouTube"
    }
  ],
  "telephone": "101",
  "id": "bedfordshire",
  "name": "Bedfordshire Police"
}

Answer 1

为了避免使用map操作符，您应该使用Lodash：

const array = _.values(obj);

您可以在此处查看文档https://lodash.com/docs/4.17.15#values

Answer 2

此代码返回值的数组，但缺少键。

  fetchForceDetail(){
    return this.http
    .get<ForceDetail[]>('https://data.police.uk/api/forces/' + this.force.id)
    .pipe(map(responseData => {
      const detailArray = [];
      for (const key in responseData) {
      if (responseData.hasOwnProperty(key))
        detailArray.push(responseData[key])
      }
      return detailArray;
    }))
    .subscribe(forcedetails => {
      console.log(forcedetails);
  });
}

数组返回：

[
    "<p>Bedfordshire Police is dedicated to protecting people and fighting crime together.</p>\n\n<p>At 477 square miles and with 664,500 people Bedfordshire is one of England’s smallest, yet most diverse, counties and faces complex crime challenges more usually seen in large metropolitan cities.</p>\n\n<p>More than half of its residents live in its largest towns, Luton and Bedford, which have diverse and often transient communities, alongside smaller market towns and rural parishes.</p>\n\n<p>Bedfordshire is a hub of transport link with London Luton Airport, the UK’s fifth busiest, the M1 and A1(M)motorways which traverse the county, and two principle railway lines that connect people with the heart of London in less than an hour.</p>\n\n<p>Bedfordshire has a complex mix of volume crime, serious crimes, drugs, gangs and terrorism threats.Every day our officers meet threats, harm and risks like those in large cities.</p>\n\n<p>Despite our relatively small size, we lead joint protective services which include Armed Policing, Dogs, Roads Policing and the Major Crime, for Bedfordshire, Cambridgeshire and Hertfordshire and are the lead force for the Eastern Region Special Operations Unit – a co - ordinated approach from seven forces in the region to tackle serious and organised crime and terrorism.</p>",
    "http://www.bedfordshire.police.uk",
    [
        {
            "url": "https://www.bedfordshire.police.uk/",
            "type": null,
            "description": "<p>Latest news, information about crime, crime reduction advice and information about your area can be found on our website.<br />We offer a range of online services for reporting crime and suspicious activity, requesting information, giving feedback and applying for jobs.See our website for details of all our online services.</p>",
            "title": "Bedfordshire Police"
        },
        {
            "url": "http://www.facebook.com/bedspolice",
            "type": null,
            "description": "<p>Bedfordshire Police on Facebook</p>",
            "title": "Bedfordshire Police on Facebook"
        },
        {
            "url": "http://twitter.com/bedspolice",
            "type": null,
            "description": "<p>Bedfordshire Police on Twitter</p>",
            "title": "Bedfordshire Police on Twitter"
        },
        {
            "url": "http://www.youtube.com/bedfordshirepolice",
            "type": null,
            "description": "<p>Bedfordshire Police on YouTube</p>",
            "title": "Bedfordshire Police on YouTube"
        }
    ],
    "101",
    "bedfordshire",
    "Bedfordshire Police"
]