Angularjs 向对象数组强制转换json响应

我想学一点角度2。我正在做一个简单的应用程序，以随机顺序分组

我遵循了heroes教程，让我感到困惑的是json响应被转换到一个对象数组中（Hero[]）

这是英雄教程中的代码（已修改为使用我的codeigniter后端）：

这就像预期的一样，我得到了一份英雄名单

对于我自己的项目，这是我获取组列表的版本：

getGroups(): Promise<Groupmember[]> {
const url = `${this.heroesUrl}/groups`;

return this.http
  .post(url, JSON.stringify({group_size: '4'}), {headers: this.headers})
  .toPromise()
  .then(response => response.json().groups as Groupmember[])
   .catch(this.handleError);

组件html只是简单地显示一些内容：

<h3>Groups</h3>
<div class="grid grid-pad">
  <a *ngFor="let groupmember of groups"  [routerLink]="['/detail', 
      groupmember.id]"  class="col-1-4">
    <div class="module groupmember">
      <h4>{{groupmember.name}}</h4>
    </div>
  </a>
</div>

模型用似乎正确的数据进行回复：

"groups": [
  {
    "id": "1",
    "name": "mr. nice",
    "role": "",
    "group_id": "1"
  },
  {
    "id": "2",
    "name": "narco",
    "role": "",
    "group_id": "1"
  },
  {
    "id": "3",
    "name": "bombasto",
    "role": "",
    "group_id": "1"
  },
  {
    "id": "4",
    "name": "celeritas",
    "role": "",
    "group_id": "1"
  },
  {
    "id": "5",
    "name": "magneta",
    "role": "",
    "group_id": "2"
  },
  {
    "id": "6",
    "name": "rubberman",
    "role": "",
    "group_id": "2"
  },
  {
    "id": "7",
    "name": "dynama",
    "role": "",
    "group_id": "2"
  },
  {
    "id": "8",
    "name": "dr iq",
    "role": "",
    "group_id": "2"
  },
  {
    "id": "9",
    "name": "magma",
    "role": "",
    "group_id": "3"
  },
  {
    "id": "10",
    "name": "tornado",
    "role": "",
    "group_id": "3"
  },
  {
    "id": "13",
    "name": "mr fantabulous",
    "role": "",
    "group_id": "3"
  },
  {
    "id": "14",
    "name": "xray eyes man",
    "role": "",
    "group_id": "3"
  },
  {
    "id": "15",
    "name": "new hero",
    "role": "",
    "group_id": "4"
  },
  {
    "id": "16",
    "name": "old hero",
    "role": "",
    "group_id": "4"
  },
  {
    "id": "17",
    "name": "another hero",
    "role": "",
    "group_id": "4"
  }
 ]

---

我相信我正在使用完全相同的方法将响应转换为对象数组，但它似乎没有转换。页面中没有显示任何数据。我是否缺少什么？我已经搜索了一整天，试图找出为什么这不会起同样的作用。看起来我在用完全相同的方式来投球。非常感谢一些指针，特别是有什么区别，这意味着它将使用heros对象，而不是我的groupmember对象

getGroups（）：Promise{…我不确定我是否明白你的意思。我的做法与Promise示例完全相同。我使用其他http post的url，效果很好。我收到了json，但似乎无法将数据转换为Groupmember对象形式，即，将json转换为Groupmember数组，就像使用Hero[]如果您不知道我的意思，那么为什么要修改我指出的部分呢？getGroups（）：Promise{const url=${this.heroesUrl}/组；在你的函数中，你在做一个post。在最初的函数中，一个get已经完成。你怎么能看不到这些差异呢？事实上，不，这最终是可以的。我按照你说的做了，同时也将组成员更改为组。这很有效，但我想看看post是否可以双向（post和get）。两者都是。所以我意识到我在服务中使用了组，在仪表板组件中使用了组成员。如果没有您的消息，我就无法解决这一问题，因为我一开始认为这还可以。哈哈。

export class Groupmember 
{
  id: number;
  name: string;
  role: string;
  group_id: number;
}

<h3>Groups</h3>
<div class="grid grid-pad">
  <a *ngFor="let groupmember of groups"  [routerLink]="['/detail', 
      groupmember.id]"  class="col-1-4">
    <div class="module groupmember">
      <h4>{{groupmember.name}}</h4>
    </div>
  </a>
</div>

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

import { HeroService } from './hero.service';
import { Groupmember } from './groupmember';

@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html',
styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
  groupmembers: Groupmember[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit(): void {
    this.heroService.getGroups()
      .then(groupmembers => this.groupmembers = groupmembers.slice(0, 3));
  }
}

"groups": [
  {
    "id": "1",
    "name": "mr. nice",
    "role": "",
    "group_id": "1"
  },
  {
    "id": "2",
    "name": "narco",
    "role": "",
    "group_id": "1"
  },
  {
    "id": "3",
    "name": "bombasto",
    "role": "",
    "group_id": "1"
  },
  {
    "id": "4",
    "name": "celeritas",
    "role": "",
    "group_id": "1"
  },
  {
    "id": "5",
    "name": "magneta",
    "role": "",
    "group_id": "2"
  },
  {
    "id": "6",
    "name": "rubberman",
    "role": "",
    "group_id": "2"
  },
  {
    "id": "7",
    "name": "dynama",
    "role": "",
    "group_id": "2"
  },
  {
    "id": "8",
    "name": "dr iq",
    "role": "",
    "group_id": "2"
  },
  {
    "id": "9",
    "name": "magma",
    "role": "",
    "group_id": "3"
  },
  {
    "id": "10",
    "name": "tornado",
    "role": "",
    "group_id": "3"
  },
  {
    "id": "13",
    "name": "mr fantabulous",
    "role": "",
    "group_id": "3"
  },
  {
    "id": "14",
    "name": "xray eyes man",
    "role": "",
    "group_id": "3"
  },
  {
    "id": "15",
    "name": "new hero",
    "role": "",
    "group_id": "4"
  },
  {
    "id": "16",
    "name": "old hero",
    "role": "",
    "group_id": "4"
  },
  {
    "id": "17",
    "name": "another hero",
    "role": "",
    "group_id": "4"
  }
 ]