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组件初始化

回答

相关问题