Angular 2 rc1組件初始化

我正在試驗Angular 2 rc1並有一個非常簡單的組件。所顯示的失敗：Angular 2 rc1組件初始化

import { Component, OnInit } from '@angular/core'; 
import { Http, Response }  from '@angular/http'; 
import { Observable }   from 'rxjs/Observable'; 
import { Movie }    from "./movie"; 
import { MovieService }   from "./movieService"; 

import "rxjs/add/operator/map"; 

@Component 
({ 
    selector: 'my-app', 
    template: ` 
     <p>{{mov.Rating}}</p> 
     <ul> 
      <li *ngFor="let movie of movies" > 
      {{movie.Title}} - {{movie.Rating}} 
      </li> 
     </ul> 
     `, 
    providers: [MovieService] 
}) 

export class AppComponent implements OnInit 
{ 
    public name: string; 
    public mov: Movie;// = { Title: "bla", Rating: 3 }; 
    public movies: Movie[]; 

    constructor(private movieService: MovieService) {} 

    public ngOnInit() 
    { 
     this.movieService.getMovies() 
      .subscribe(movies => 
      { 
       this.movies = movies; 
       this.mov = this.movies[1]; 
      }); 
    } 
}

如果我做初始化mov變量（並且沒有其他變化），它會工作得很好。

當它失敗時，瀏覽器（chrome，firefox或IE）會拋出一個異常（「TypeError：Can not read property'Rating'of undefined」）並結束執行。 MovieService確實需要幾毫秒的實際API調用，在此期間mov確實未定義。在Angular1中，這不是問題;它什麼都不會顯示。

我試過撥打movieService致電constructor但這沒什麼區別。

這是預期的行爲，一個錯誤，或者我錯過了什麼，並且有一種方法可以防止它（除了初始化mov變量）？

來源

2016-06-12 hholtij

這是打算的行爲。正如您已經注意到的那樣，mov變量在組件初始化時確實未定義。因此Angular無法閱讀mov的Rating財產。只有當API調用返回時，mov變量才被填充。

你確實可以在構造函數中初始化變量。另一個或許更簡潔的方法是在模板中使用Elvis運算符：

<p>{{mov?.Rating}}</p>

Elvis運算符可以防範空值（/未初始化）。

來源

2016-06-12 07:56:33 Sjoerd

Angular 2 rc1組件初始化

回答

相關問題