angular2：值未显示在视图中 - 未定义

Question

所以我有一个组件和一个服务....该服务进行 API 调用并填充组件的变量 (this.data)

在组件方面一切正常，console.log在战略位置总是 returns 价值...非常简单

当我想在视图中显示数据时（假设只是 {{data.name}}，我得到一个错误...无法读取未定义的属性 'name'

这个错误实际上是在我输入服务调用 console.log 之前打印出来的....所以我认为它不会等待调用返回...

import { Component, OnInit }            from '@angular/core';
import { Router, ROUTER_DIRECTIVES  }   from '@angular/router';
import { Index, IndexColumn }           from '../index';
import { IndexService }                 from '../index.service';

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({name: 'ex'})
export class StringifyPipe implements PipeTransform {
    transform(value: any): string {
        return JSON.stringify(value);
    }
}


@Component({
    moduleId: module.id,
    selector: 'app-index',
    template: require('./indicesDetails.component.html'),
    styleUrls: [String(require('./indicesDetails.component.less'))],
    providers: [IndexService],
    pipes: [StringifyPipe]
})

export class IndicesDetailsComponent implements OnInit  {
    errorMessage: string;
    index: Index;
    mode = 'Observable';

    constructor (private indexService: IndexService,  private router: Router) {}

    ngOnInit() {
        this.getDetails('AAAAAA');
    }

    getDetails(id:string) {
        this.indexService.getIndex()
            .subscribe(
                data => {
                    console.log(data);
                    this.index = data;
                },
                error =>  this.errorMessage = <any>error
            );
    }
}

和视图：

<main>
    <h1>INDEX DETAILS</h1>

    <h4>{{index | ex}}</h4>

    <h5>{{index.name}}</h5>

    <p>This is the home page</p>
</main>

如果我没有在打印出的索引中放入带有 index.name 的行，index.name 会抛出提到的错误

Answer 1

由于index是异步加载的，所以属性一开始就是null。您需要利用 Elvis 运算符来防止出现错误：

<main>
  <h1>INDEX DETAILS</h1>

  <h4>{{index | ex}}</h4>

  <h5>{{index?.name}}</h5> <------

  <p>This is the home page</p>
</main>

angular2：值未显示在视图中 - 未定义

angular2: value not showing in the view - undefined

angular

angular2-services