Question

我正在尝试学习一些角度2.我正在制作一个简单的应用程序来按随机顺序制作组。

我遵循了英雄教程，投掷我的部分是将json响应强制转换为对象数组（Hero []）。

这是Heroes教程中的代码（已修改为与我的codeigniter后端一起使用）：

export class Hero {
  id: number;
  name: string;
}

和英雄课：

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);

这按预期工作，我得到一个英雄列表。

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

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>

组件html只是简单地显示一些东西：

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"
  }
 ]

该模型回复了似乎正确的数据：

{{1}}

我相信我正在使用完全相同的方法将响应转换为对象数组，但似乎没有强制转换。页面中没有显示数据我是否遗漏了什么？我整天都在搜索，试图找出为什么这种方法不起作用。看起来我正以完全相同的方式投射。真的很感激一些指针，特别是有什么不同意味着它会与heros对象一起使用而不是我的groupmember对象

将json响应转换为对象数组

0 个答案: