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：无法读取未定义的属性'Rating'）并结束执行。 MovieService进行实际的API调用，需要几毫秒，在此期间mov确实是未定义的。在Angular1中，这不是问题;它根本不会显示任何内容。

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

这是预期的行为，是一个错误，还是我遗漏了某些内容并且有办法阻止它（除了mov变量的初始化之外）？

Answer 1

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

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

mov

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

Angular 2 rc1组件初始化

1 个答案: