angular2: значение не отображается в окне - не определено

Question

Так что я имею компонент и обслуживание .... обслуживание делает вызов API и заполнит переменную компонента (this.data)

на компонентной стороне все хорошо работает, console.log на стратегических местах всегда возвращает значение ... это довольно прямолинейно

Когда я хочу отображать данные (скажем, просто {{data.name}} в представлении, я получаю сообщение об ошибке ... Невозможно прочитать свойство 'name' of undefined

эта ошибка на самом деле напечатана перед консолью.logs, которую я положил в свои сервисные звонки .... поэтому я считаю, что это не так он для звонков, чтобы вернуться ...

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 
      ); 
    } 
} 

ANSD мнения:

<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>