Json 角度5*Ng表示不工作，无错误

我现在面临着一个问题。 我想从我的服务器API读取数据，并想在html文档中用*ngfor显示数据。 我可以从API接收数据，但无法显示它。 我从《英雄之旅》教程中选取了示例代码，并对其进行了更改： 数据进入我的angular应用程序。我可以在chrome开发控制台中记录并查看它。 我试图显示我从api中获得的其他数据，它正在工作。您可以在heromes.components.ts中看到注释掉的数据

谁能帮我做这个？ 如果你想看到更多的代码，如导入，请告诉我。但是我想所有需要导入的东西都是导入的，因为没有错误消息，我可以从我的api中获取数据，我可以显示一些数据（遗憾的是，不是我需要的数据）

我在其他一些帖子中尝试了几种解决这个问题的方法，但都没有成功

非常感谢你的建议

以下是一些代码片段： 这是我的英雄

进口

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';
import { Hero } from '../model/hero';
import { MessageService } from '../message.service';
import { Response } from '@angular/http/src/static_response';

getHeroes(): Observable<Hero[]> {
 console.log("GET HEROES IN HEROES.SERVICE");
 return this.http.get<Hero[]>(this.heroesUrl)
   .pipe(
     tap(Hero => console.log(`fetched heroes: `)),
     catchError(this.handleError('getHeroes', []))
   );

我从API返回的JSON。在线Json格式化程序说它是有效的Json

this.heroService.getHeroes()
.subscribe(  
  function(response: Hero[]) { }

---

编辑：添加了更多的代码和我的导入。

您的代码似乎还可以，但我看到您的json格式中有一个错误

“滴度”：“博士”，}

尝试删除Dr后面的逗号并尝试一下

“滴度”：“博士”}

你的问题可能就在这里。您的响应是一个具有（比如说，接口）的对象：

因为您设置了

response:Hero[]

并且在

Hero

界面中没有

data

属性，

response[“data”]

返回空值，您将永远无法获取数据。如果您运行

response.data

，您可能会得到一个错误，说明在Hero等中未定义

数据

更改为：

这是Http还是HttpClient？它是HttpClientI现在添加了我的导入。我想这比我最初想的更重要。问题在于你的
订阅
。当
response时，您设置了
（response:Hero[]）
。数据
是
Hero[]
而不是
response
。谢谢。遗憾的是，这不是问题所在。为了向您展示一个示例，我更改了json数据。在我的数据中，一切都很好，我在Jsonformatter上进行了检查。。。所以这个逗号在我的真实数据中不存在。那只是个打字错误。但是谢谢你的尝试。是的：）这对我帮助很大。我更改了hero.services.ts中getHeroes（）方法的主体，以返回this.http.get（this.heroesUrl）；之后我可以订阅（回复：response）。不知道为什么我以前错过了这个，很好。很高兴它对您有所帮助，请将其标记为答案，以便其他人稍后可以参考：）
<h2>My Heroes</h2>

<!-- <input type=text ng-model="hero"> -->
// I gave it a try with and without *ngIf="heroes"
<!-- only show the list IF the data is available -->
<div *ngIf="heroes">
  <h3>Heroes are available and are displayed</h3>
  <li *ngFor="let hero of heroes">
      {{hero.name}}
  </li>
</div>

<button (click)="button()">
    Suchen
  </button>

<div *ngIf="heroes">
  <table class="heroes">
      <tr>
        <th>Id</th>
        <th>Titel</th>
        <th>Nachname</th>
        <th>Vorname</th> 
      </tr>
      //I tried async as the data is maybe not available from the 
      beginning. Also tried async on hero as heroes is created on init 
      and single heros are added with the function getHeroes();
      <tr *ngFor='let hero of heroes | async'>
        <a routerLink="/detail/{{hero.id}}">
        <td>{{hero.id}}</td>
        <td>{{hero.titel}}</td>
        <td>{{hero.name}}</td>
        <td>{{hero.vorname}}</td>
        </a> 
        <button class="delete" title="delete hero"
        (click)="delete(hero)">x</button>
      </tr>
    </table>
  </div>

  <pre>{{heroes | json}}</pre>

export interface Hero {
  id?: string;
  name: string;
  titel?: string;
  vorname: string;
}

 {"status":"Success","data":
[{"id":"36","name":"Hero","vorname":"Super","titel":"Dr.",},
{"id":"34","name":"Man","Spider":"Ines","titel":""}],
"message":"Retrieved all HEROES"}

this.heroService.getHeroes()
.subscribe(  
  function(response: Hero[]) { }

interface DataResponse {
     success: string;
     data?: Hero[];
}

this.heroService.getHeroes()
     .subscribe((response: DataResponse) => {
         this.heroes = response["data"];
     });