Angular 2 rc1组件初始化

Question

我正在试验 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: Cannot read property 'Rating' of undefined"）并结束执行。 MovieService 执行实际的 API 调用，需要几毫秒，在此期间 mov 确实未定义。在 Angular1 中这不是问题；它什么也不会显示。

我尝试在 constructor 中进行 movieService 调用，但没有任何区别。

这是预期的行为、错误还是我遗漏了什么并且有办法防止它（mov 变量的初始化除外）？

Answer 1

这是有意为之的行为。正如您已经注意到的那样，mov 变量在组件初始化时确实未定义。因此Angular无法读取mov的Rating属性。只有当API调用returns时，才会填充mov变量。

您确实可以在构造函数中初始化变量。另一种可能更简洁的方法是在模板中使用 Elvis 运算符：

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

Elvis 运算符防止空值（/未初始化）。

Angular 2 rc1组件初始化

Angular 2 rc1 component initialization

angular2-template

angular