Angular 角度前端无法将json响应识别为数组

在做官方的Angular教程时，我尝试使用SpringJPA REST建立一个真正的后端连接，而不是模拟Angular“服务器”。REST端点配置为分页和排序存储库。这是来自后端的服务器响应。

我尝试将这些数据输入前端，如下所示：

@Injectable({
  providedIn: 'root'
})
export class HeroService {
  private heroesUrl = 'http://localhost:8080/api/heroes';

  constructor(
    private http: HttpClient,
    private messageService: MessageService ) { }

  getHeroes(): Observable<Hero[]> {
    // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return this.http.get<Hero[]>(this.heroesUrl); // of(HEROES);
  }

@可注入({
providedIn:'根'
})
导出类服务{
私有heroesUrl=http://localhost:8080/api/heroes';
建造师(
私有http:HttpClient，
私有消息服务：消息服务）{}
getHeroes（）：可观察{
//TODO:在抓到英雄后发送消息
this.messageService.add（'HeroService:fetched heros'）；
返回this.http.get（this.heroesUrl）；//of（HEROES）；
}

HTML代码：

<h2>My Heroes</h2>
<ul class="list-group">
  <li class="list-group-item" *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge badge-dark">{{hero.id}}</span> {{hero.name}}
    </a>
  </li>
</ul>

我的英雄


{{hero.id}{{hero.name}

此代码产生以下错误：

错误：找不到不同的支持对象“[object]” 类型为“object”。NgFor仅支持绑定到Iterables，例如 数组

---

您正在迭代

*ngFor

中的对象

{}

。您应该迭代数组

[]

假设您的json保存在

数据中

基于您的json，它应该类似于：

<table>
  <tr *ngFor="let item of data._embedded.heroes">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
  </tr>
</table>

{{item.id}
{{item.name}

您正在迭代

*ngFor

中的对象

{}

。您应该迭代数组

[]

假设您的json保存在

数据中

基于您的json，它应该类似于：

<table>
  <tr *ngFor="let item of data._embedded.heroes">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
  </tr>
</table>

{{item.id}
{{item.name}

来自服务器的响应包含作为对象嵌入的_。您需要将其作为“heroes”数组发送，或者在前端使用heroes变量并将其分配为

this.heroes = response._embedded.heroes;

---

希望有帮助。

来自服务器的响应包含作为对象嵌入的_。您需要将其作为“heroes”数组发送，或者在前端使用heroes变量并将其分配为

this.heroes = response._embedded.heroes;

---

希望有帮助。

HTML使用异步管道

<table>
  <tr *ngFor="let item of getHeroes()|async">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
  </tr>
</table>

{{item.id}
{{item.name}

使用映射运算符从响应对象仅获取heroes属性

getHeroes(): Observable<Hero[]> {
    // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return this.http.get<any>(this.heroesUrl)
        .pipe(
            map(data => data._embedded.heroes)
        );
}

getHeroes（）：可观察{
//TODO:在抓到英雄后发送消息
this.messageService.add（'HeroService:fetched heros'）；
返回this.http.get（this.heroesUrl）
.烟斗(
映射（数据=>data.\u embedded.heromes）
);
}

HTML使用异步管道

<table>
  <tr *ngFor="let item of getHeroes()|async">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
  </tr>
</table>

{{item.id}
{{item.name}

使用映射运算符从响应对象仅获取heroes属性

getHeroes(): Observable<Hero[]> {
    // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return this.http.get<any>(this.heroesUrl)
        .pipe(
            map(data => data._embedded.heroes)
        );
}

getHeroes（）：可观察{
//TODO:在抓到英雄后发送消息
this.messageService.add（'HeroService:fetched heros'）；
返回this.http.get（this.heroesUrl）
.烟斗(
映射（数据=>data.\u embedded.heromes）
);
}

请显示您的html代码是请显示html以及您在哪里使用

getHeroes（）

Method请显示您的html代码是请显示html以及您在哪里使用

getHeroes（）

methodProperty\u embedded在类型Hero[]上不存在尽管存在错误，但thanx。但是异步的原因是什么？@Dmitry异步管道订阅一个可观察或承诺，并返回它发出的最新值。检查链接属性\u embedded在类型Hero[]上不存在尽管存在错误，但thanx。但是异步的原因是什么？@Dmitry异步管道订阅一个可观察或承诺，并返回它发出的最新值。检查链接