Angular 2在组件负载上调用API

Question

我对Angular 2很新，我想完成的工作很简单：

1. 获取通过路由传递的类别ID
2. 与类别ID调用API
3. 填充变量的"类别"，数据从API返回并显示类别名称

我的观点很简单：

<h3>{{category.name}}</h3>

组件代码：

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { ActivatedRoute } from '@angular/router';
@Component({
    selector: 'browse-category',
    template: require('./browse-category.component.html'),
    styles: [require('./browse-category.component.css')]
})
export class BrowseCategoryComponent {
    products: IProduct[];
    category: ICategory;
    categoryId: number;
    constructor(private route: ActivatedRoute, private http: Http, @Inject('ORIGIN_URL') private originUrl: string) {
    }
    ngOnInit(): void {
        this.route.params.subscribe(params => {
            this.categoryId = +params['categoryId']; 
            // get category details
            this.http.get(this.originUrl + '/api/Category/' + this.categoryId).subscribe(result => {
                var data = result.json().data;
                if (data != null && result.status === 200) {
                    this.category = data;
                    console.log(this.category);
                }
            });
        });
    }
}

如果我禁用视图输出，我可以看到Console.log输出，如果不，我会收到以下错误：

nodeinvocation exception：未被发达（在承诺中）：typeError：无法读取未定义的属性"名称"TypeError：无法读取未定义的属性

的属性"名称"

我认为这是因为诺言尚未返回。理想情况下，解决此问题的最佳方法是什么？

Answer 1

使用{{category?.name}}这称为"安全导航"运算符，并且Angular只有在定义而不是null时才尝试访问类别。