Question

编辑：无需回答，问题出在其他地方。我很抱歉：（

我需要getHeroes（）返回一个数组'Hero'。它正在使用教程的内存中数据，但是当我使用django rest API时失败。

hero.ts

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

hero.service.ts

getHeroes (): Observable<Hero[]> {
      return this.http.get<Hero[]>(this.heroesUrl).pipe(
      map(response => response['heroes']),
      tap(_ => this.log('fetched heroes')),
      catchError(this.handleError<Hero[]>('getHeroes', []))
    );
}

来自API的JSON响应

{
  "heroes": [
    {
      "id": 1,
      "name": "hero1"
    },
    {
      "id": 2,
      "name": "hero2"
    }
  ]
}

Answer 1

您可以在组件subscribe中使用：

import { Hero } from "./heroComponent";

export class SomeComponent implements OnInit {

  heroes: Hero;

  constructor(private serv: YourService) { }

  ngOnInit() {
    this.serv.getHeroes().subscribe(serv => {
        this.heroes = serv
        console.log(this.heroes);
    });
  }

}

当然，请更改一些内容以使其适合您的代码。它应该将您的JSON映射到对象。

看看是否还有这些帮助：

这可能是您所要询问的内容更多：https://nehalist.io/working-with-models-in-angular/

其他

Map Json to object in angular

https://coursetro.com/posts/code/171/Angular-7-Tutorial---Learn-Angular-7-by-Example （向下滚动到其中的HTTP服务部分）

Answer 2

有两种选择（此处为简洁起见，省略了错误处理）：

选项1：将结果视为count并将any属性强制转换为heroes

Hero[]

选项2（首选）：：创建一个模型（例如getHeroes(): Observable<Hero[]> { return this.http.get<any>(this.heroesUrl).pipe( map(res => res.heroes as Hero[]) ); }），该模型表示您的服务器实际返回的具有完全类型安全性的

HeroResult

Answer 3

对不起。当我看到django API发送的XHR响应时，出现了CORS问题。我不必更改代码。只是不得不允许在哥伦比亚的CORS。很抱歉占用您的时间。谢谢您的建议。

如何将JSON响应转换为服务中的角度对象数组？

3 个答案: