Question

一直在使用一个角度2的应用程序，点击一个链接，它转到带有params的页面，上面有数据。我想我大部分都知道它是如何完成的，但是当我点击列表页面上的链接时，会出现一个错误，导致我的数据无法显示在详细信息页面上。有人可以帮助解决这个问题，我一整天都被困在这里。基本上，当我点击列表页面上的链接并进入详细信息页面时。数据未显示。不知道该修复什么。

膜list.component

      import { Component, OnInit } from '@angular/core';
    import { Observable } from 'rxjs/Observable'
    import { FilmService } from '../film.service';
    import { Film } from "../film";

    @Component({
      template: `
      <h1>List of Films</h1>
      <p>Films:</p>
      <ul>
        <li *ngFor="let film of films ">
         <a [routerLink]="['/films', film.id]">{{film.title}}</a>
          </li>
      </ul>
      <p *ngIf="films.length > 3">There are many vietnamese films to learn about!</p>
    `
    })

    //Component class
    export class FilmListComponent implements OnInit {

      public films: Film[] = [];//******try like this
      constructor(private filmService: FilmService) {
      }

      getFilms() {
        this.filmService.getFilms().then((films: Film[]) => this.films = films);
      }

      ngOnInit(): any {
        this.getFilms()
      }
    }

film-details


    import {Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ROUTER_DIRECTIVES, ActivatedRoute } from '@angular/router';
import { FilmService } from '../film.service';
import { Film } from "../film";

@Component ({
  selector: 'film-details',
  template:
    `
<h1>Film Information</h1>
<h1>Rating: 5/5</h1>
     <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" width="100">
     <p>Summary information</p>




<div *ngIf="film">
<h2>{{film.title}}</h2>
<p>{{film.summary}}</p>
</div>
`,
  directives:[ROUTER_DIRECTIVES]

})

//Component class
export class FilmDetailsComponent implements OnInit {

  public sub: any;
  public films: Film[] = [];
  film: Film;

  constructor(private filmService: FilmService, private route: ActivatedRoute) {

  }

  //Load data
  ngOnInit() {
    // subscribe to route params
    this.sub = this.route.params.subscribe(params => {
      let id = params ['id'];

      //retrieve the film id
      this.filmService.getFilms(id).then(film => this.film = film);
    });
  }

  ngOnDestroy() {
    // Clean sub to avoid memory leak
    this.sub.unsubscribe();
  }
}

膜的服务

  import { Injectable } from "@angular/core";

    import { Film } from './film';
    import { FILMS } from './mock-films';

    @Injectable()
    export class FilmService {
      getFilms(): Promise<Film[]> {
        return Promise.resolve(FILMS)
      }

      getFilm(id: number): Promise<Film> {
        return this.getFilms()
          .then(films => films.find(film => film.id === id));
      }
    }

模拟数据

import { Film } from './film';

//storing the data in array
export const FILMS: Film[] = [
  {id:11, title: 'pokemon', summary:'great'},
  {id:12, title: 'naruto', summary: 'good'},
  {id:13, title: 'bleach', summary: 'meh'},
  {id:14, title: 'one piece', summary: 'not bad'}
];
app.routes.ts

....
// Route Configuration
export const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'films', component: FilmListComponent},
  { path: 'films/:id', component: FilmDetailsComponent}
];

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Vietnam</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- MDL CSS library  -->
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">

    <!-- MDL JavaScript library  -->
    <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>

    <!-- Material Design Icons  -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <!-- Custom Style  -->
    <link rel="stylesheet" href="styles.css">


    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    <!-- ./index.html  -->
    <!-- need to show up basic route -->
    <base href="/">
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Answer 1

我在您的代码中看到两个问题：

您确定要从正确的路径导入FilmService吗？您是从../film.service导入的，但是您声明文件名是film-services（注意您使用连字符作为文件名）
假设您要从../film-service导入，则应将findFilmById方法更改为getFilms。此外，您需要将.subscribe更改为.then，因为getFilms返回Promise而不是Observable

angularjs 2和数据不会传递给params路由

1 个答案: