Question

我想使用angular 6

显示我前端的api返回的数据

这就是我所做的：但数据并没有显示出来：

component.htm：

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Popular Movies</h3>
</div>
<div class="panel-body">
<div class="row">
    <div *ngFor="let movie of movies; let i=index" class="col-md-2">
        <div *ngIf="i < 6">
        <img *ngIf="movie.poster_path" class="thumbnail" src="http://image.tmdb.org/t/p/w500/{{movie.poster_path}}">
        <h4>{{movie.title}}</h4>
        <p>{{movie.release_date}}</p>

        <p><a class="btn btn-default" routerLink="/movie/{{movie.id}}">View details &raquo;</a></p>
      </div>
    </div>
</div>
</div>
</div>

component.ts：

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { Location } from '@angular/common';
import { MoviesService } from '../movies.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.scss']
})
export class MoviesComponent implements OnInit {
   movies: any;

 constructor(private router: ActivatedRoute, private http: Http, private location: Location, private moviesService: MoviesService) {
      this.movies = [];
  }

  ngOnInit() {
    this.router.params.subscribe((params) => {
      const id = params['id'];
      this.moviesService.getMovies(id)
      .then(movies => {
          console.log(movies);
          this.movies = this.movies;
        });
   });
  }
}

service.ts：

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import {Jsonp} from '@angular/http';
@Injectable({
  providedIn: 'root'
})
export class MoviesService {

  private apiUrl = 'http://localhost:8000/movies';


  constructor(private http: Http, private _jsonp: Jsonp) { }


  getMovies(id: string): Promise<any> {
      return this.http.get(this.apiUrl)
                 .toPromise()
                 .then(this.handleData)
                 .catch(this.handleError);
  }
  private handleData(res: any) {
       const body = res.json();
       console.log(body); // for development purposes only
       return body || {};
   }
 private handleError(error: any): Promise<any> {
     console.error('An error occurred', error); // for development purposes only
     return Promise.reject(error.message || error);
 }
}

当我运行我的应用程序时，没有显示从api返回的数据，当我在Web浏览器中检查重新响应时，返回的数据没有错误，

为什么我的应用中没有显示数据？有什么建议我可能会犯错吗？感谢

Answer 1

问题在于服务的handleData方法。

您将变量body声明为常量，这意味着它的值是不可变的。因此，您尝试将其值设置为res.json（）将被忽略。

相反，请将其更改为：

let body = res.json();你应该全力以赴。

修改

还要注意res.json()是不必要的;对json（）的调用会自动应用。您不需要在Angular 6中执行此操作。并使用HttpClient服务，而不是Http。

Answer 2

我认为当您点击F12时，您的开发工具中出现了movies未定义的错误。

原因是因为您的模板在movies数据具有来自服务器（异步调用承诺）的值之前首先加载，然后模板正在尝试查找{{1} movies和{}中的变量 angular捕获了未定义的错误。

为避免这种情况，在数据尚不可用时不显示模板。您可以使用*ngFor="let movie of movies; let i=index"或更好地使用*ngIf="movies"，ng-template和ng-container的组合来显示加载指标。

ngTemplateOutlet

但我通常使用的是<div *ngIf="movies" class="row"> <div *ngFor="let movie of movies; let i=index" class="col-md-2"> <div *ngIf="i < 6"> <img *ngIf="movie.poster_path" class="thumbnail" src="http://image.tmdb.org/t/p/w500/{{movie.poster_path}}"> <h4>{{movie.title}}</h4> <p>{{movie.release_date}}</p> <p><a class="btn btn-default" routerLink="/movie/{{movie.id}}">View details »</a></p> </div> </div> </div>，ng-template和ng-container：

*ngTemplateOutlet

<强>更新

找到了罪魁祸首。

<div class="panel-body"> <ng-container *ngTemplateOutlet="movies ? content : loading"></ng-container> <ng-template #content> <div class="row"> <div *ngFor="let movie of movies; let i=index" class="col-md-2"> <div *ngIf="i < 6"> <img *ngIf="movie.poster_path" class="thumbnail" src="http://image.tmdb.org/t/p/w500/{{movie.poster_path}}"> <h4>{{movie.title}}</h4> <p>{{movie.release_date}}</p> <p><a class="btn btn-default" routerLink="/movie/{{movie.id}}">View details »</a></p> </div> </div> </ng-template> <ng-template #loading> <div>loading data...</div> </ng-template> </div> </div>

上的作业有误

ngOnInit()

Angular 6页面没有显示节点后端的数据

2 个答案: