Question

我现在面临Angular的问题。我想从我的服务器API读取数据，并希望在html文档中使用* ngfor显示它。我可以从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;
}

我从API返回的JSON。在线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

您的代码似乎没问题，但我在这里看到了json格式的错误

“影片名称”： “医生”，}，

尝试在Dr之后删除逗号并试一试

“影片名称”： “博士”}，

Answer 2

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

你的问题可能就在这里。您的回复是一个对象（让我们说，接口）：

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

由于您在response: Hero[]界面设置了data并且没有Hero属性，response["data"]会返回null并且您永远不会得到您的数据。如果您运行response.data，则可能会收到错误data is not defined in Hero等...

更改为以下内容：

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

Angular5 * ng不工作，没有错误

2 个答案: