Angular5 *ng для не работает, без ошибок

Question

У меня сейчас проблема с Angular. Я хочу прочитать данные из моего серверного API и хочу отобразить их с помощью *ngfor в HTML-документе. Я могу получить данные из API, но не могу их отобразить. Я взял пример кода из учебника "Тур по героям" и изменил его: данные попадают в мое угловое приложение. Я могу console.log это и видеть это в консоли разработки Chrome. Я пытался отобразить другие данные, которые я получаю из моего API, и он работает. Вы можете увидеть закомментированные данные в heroes.components.ts.

Кто может мне помочь с этим? Если вы хотите увидеть больше кода, такого как импорт, пожалуйста, сообщите мне. Но я предполагаю, что все необходимое импортировано, так как нет сообщений об ошибках, я могу получить данные из моего API и отображать некоторые данные (к сожалению, не те данные, которые мне нужны).

Я попробовал несколько идей, чтобы решить эту проблему из некоторых других постов, но не могу заставить его работать.

Большое спасибо за ваши предложения.

Вот некоторые фрагменты кода: это мой hero.service.ts

импорт...

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', []))
   );

// Я также пытался использовать return this.http.get(this.heroesUrl);

Это мой heroes.components.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../../model/hero';
import { HeroService } from '../hero.service';
import { CommonModule } from '@angular/common';
import { Pipe } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Response } from '@angular/http/src/static_response';
// For use of map
import 'rxjs/Rx';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {

  heroes: Observable<Hero[]>;
  // I tried to display some data 
  // heroes: any[] = [
  //   {
  //     "name": "Douglas  Pace"
  //   }
  // ];
  constructor(private heroService: HeroService) { }

  ngOnInit() {
   this.getHeroes();
    // undefined
    console.log("ONINIT");
    console.log(this.heroes);
  }

  getHeroes(): void {
    console.log("GET HEROES IN HEROES.COMPONENT");
    this.heroService.getHeroes()
    .subscribe(  
      function(response: Hero[]) { 

        console.log("RESPONSE IN HEROES COMPONENT");
        console.log(this.heroes);
        var res = response["data"];
        // console.log(res.json());
        this.heroes = res;
        console.log(this.heroes);
        console.log(response["data"]);

      },
      function(error) { 
        console.log("Error happened" + error)

      },
      function() { 
        console.log("the subscription is completed")
        //This shows me the right data.
        console.log(this.heroes[5].id);
        console.log(this.heroes[5].titel);
        console.log(this.heroes[5].name);
        console.log(this.heroes[5].vorname);
      }
    );
  }

Мой HTML-файл:

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

JSON, который я вернулся из своего API. Онлайн JSON форматер говорит, что это действительно JSON.

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

Изменить: Добавил еще немного кода и мой импорт.

Answer 1

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

Ваша проблема может быть здесь. Ваш ответ является объектом с (скажем, интерфейсом):

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

Потому что вы установили response: Hero[] и нет data собственность в вашем Hero интерфейс, response["data"] возвращает ноль, и вы никогда не получите свои данные. Если вы бежите response.dataвы, вероятно, получите сообщение об ошибке data is not defined in Hero так далее...

Изменить на следующее:

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

Answer 2

Ваш код, кажется, в порядке, но я вижу ошибку в вашем формате JSON здесь

"Titel":"Д-р."},

попробуй убрать запятую после доктора и попробуй

"Titel":"Д-р."},