Angular项目，路由/导航中的错误，当我点击标题来显示电影时我没有得到我的对象

时间：2018-04-04 17:16:01

标签： angular angular-routing

在我想要能够推广电影片名然后让电影细节显示无法工作的角度项目中，我真的无法看到我做错了什么或我做了什么对于这个问题。

我是新手，所以我想我可能会有很多错误＆＃34;在我的项目中，但我尽力找到解决问题的方法而无需解决方案。

有一些outcomment代码，我尝试了一些想法，但没有想要删除它，所以如果你们想知道我只是超出代码：）

我确实按照自己的意愿拍摄了电影，但是当我推出一个标题时，我希望获得一个新的组件来显示电影的详细信息，我不会得到任何预期的静态HTML，你可以看到在文件中：/

我希望有人可以帮助我。

movie.service.ts看起来像这样 

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/mergeMap';

import { Movie } from './shared/Movie';

interface IMovieData {results : Movie[];}
export interface IVideoData {results : IVideo[];}
export interface IVideo {'id': string; 'key':string; 'name':string; 'site': string; 'type':string; }

@Injectable()
export class MovieService {

  private movie : any;
  private key : string;

  constructor(private http : Http) { }

  public getMovies(): Observable<Response>{
    return this.http.get("http://api.themoviedb.org/3/search/movie?query=skyfall&api_key=mykey");
  }

  public getMovie(title : string) : Observable<Movie[]> {
    return this.http.get("http://api.themoviedb.org/3/search/movie?query=" + title + "&api_key=mykey")
    .map(response => {
      const data : IMovieData = response.json();
      return data.results.filter(movie => movie.poster_path !== null).map(movie => 
        {return <Movie>{'id' : movie.id,
                        'title' : movie.title,
                        'poster_path' : "https://image.tmdb.org/t/p/w185_and_h278_bestv2"+movie.poster_path, 
                        'adult' : movie.adult,
                        'overview' : movie.overview,
                        'release_date' : movie.release_date,
                        'genres' : movie.genres,
                        'vote_average' : movie.vote_average }})

    })
  }

}

app.module.ts看起来像这样 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
//import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { MovielistComponent } from './movielist/movielist.component';
import { SearchService } from './searchservice/searchservice.module';
import { MoviedetailComponent } from './moviedetail/moviedetail.component';
import { MovieService } from './movie.service';

@NgModule({
  declarations: [
    AppComponent,
    MovielistComponent,
    MoviedetailComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      {
      path: 'movielist',
      component: MovielistComponent,
      },
      {
        path: 'moviedetail/:title', 
        component: MoviedetailComponent
      }
    ])
    //NgbModule.forRoot()
  ],
  providers: [SearchService, MovieService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts看起来像这样 

import { Component } from '@angular/core';
import { Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import  'rxjs/add/operator/map';
import { SearchService } from './searchservice/searchservice.module';
import { Subject } from 'rxjs/Subject';
import { MovieService } from './movie.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [SearchService, MovieService]
})
export class AppComponent {
  results: Object;
  searchTerm$ = new Subject<string>();

  constructor(private searchService: SearchService) {
    this.searchService.search(this.searchTerm$)
      .subscribe(results => {
        this.results = results.results;
      });
  }
}

Movie.ts 

export interface Movie {
    id : number;
    poster_path : string;
    adult : boolean;
    overview : string;
    title : string;
    release_date : string;
    genres : string;
    vote_average : string;
}

movielist.component.ts 

import { Component, OnInit } from '@angular/core';
import { Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import  'rxjs/add/operator/map';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Movie } from '../Shared/Movie';
import { MovieService } from '../movie.service';

@Component({
  selector: 'app-movielist',
  templateUrl: './movielist.component.html',
  styleUrls: ['./movielist.component.css']
})
export class MovielistComponent implements OnInit {

  private apiUrl = 'http://api.themoviedb.org/3/discover/movie?primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22&api_key=dbd9bb30692c83bcd53628df049f31ef';
  data: any = {};
  /*private movies : Movie[]; */

  constructor(
    private http: Http,
    private movieService : MovieService, 
    private route: ActivatedRoute,
    private router: Router
              )
  {
    console.log('Hello Fellow User');
    this.getContacts();
    this.getData();
  }

  ngOnInit() {
  }

  getData() {
    return this.http.get(this.apiUrl)
    .map((res: Response) => res.json())
  }

  getContacts(){
    this.getData().subscribe(data => {console.log(data);
    this.data = data})
  }
  public onSelect(result : Movie){
    this.router.navigate(['/moviedetail', result.title]);
  }
}

movielist.component.html 

<div class="container">
    <div class="row">
        <div class="col">

            <ng-container *ngFor="let result of data.results">
                <div class="moviebox">
                    <h5>{{result.title}}</h5>
                    <p>{{result.overview}}</p>
                    <br>
                    <br>
                </div>
            </ng-container>

        </div>
        <div class="col-6">
            <h3>Mid col</h3>
        </div>
        <div class="col">

            <div class="movies">
                <ul class="movies">
                    <li *ngFor="let result of data.results" [class.selected]="result === selectedMovie" (click)="onSelect(result)">
                        <span>{{result.title}} </span>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>

moviedetail component.ts 

import { Component, OnInit } from '@angular/core';
import { Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import  'rxjs/add/operator/map';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Movie } from '../Shared/Movie';
import { MovieService } from '../movie.service';

@Component({
  selector: 'app-moviedetail',
  templateUrl: './moviedetail.component.html',
  styleUrls: ['./moviedetail.component.css']
})
export class MoviedetailComponent implements OnInit {

  /*private apiUrl = 'http://api.themoviedb.org/3/discover/movie?primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22&api_key=mykey';
  data: any = {};*/
  public movie : Movie;

  constructor(
    private http: Http,
    private movieService : MovieService, 
    private route: ActivatedRoute,
    private router: Router
              )
  {/*
    console.log('Hello Fellow User');
    this.getContacts();
    this.getData();*/
  }

  ngOnInit() {
    this.movie = this.movieService.getMovie(this.route.snapshot.params['title']);
  }


  public gotoMovies(){
    this.router.navigate(['/movielist']);
  }

  /*
  getData() {
    return this.http.get(this.apiUrl)
    .map((res: Response) => res.json())
  }

  getContacts(){
    this.getData().subscribe(data => {console.log(data);
    this.data = data})
  }
  */

}

moviedetail.component.html 

<h2>movie title</h2>

<div class="container">
    <div *ngIf="movie">
        <div class="row">
            <div class="col-md-5">
                <h1>Movie:</h1>
                <b>Title:</b> {{movie.title}}<br>
                <b>Year:</b> {{movie.overview}}<br>
                <p>
                    <button (click)="gotoMovies()">Back</button>
                </p>
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>

1 个答案:

答案 0 :(得分：0)

在文件“movedetail.component.ts”中，observable很冷。通过可观察，该方法仅在有人订阅时执行。此外，您已在此处直接为变量分配了一个observable，这是不正确的。如果要将从observable返回的值赋给“movie”对象，请按如下所示进行更改：

movedetail.component.ts 

ngOnInit() {
   this.movieService.getMovie(this.route.snapshot.params['title']).subscribe(success=>{this.movie=success;});
}
相关问题
最新问题