Угловая 2 - Объяснение для непоследовательного поведения при попытке доступа к свойствам объекта с использованием службы данных

Question

Я попытался сформулировать этот вопрос в связи с 3 примерами в этом plunk. Надеюсь, это поможет сделать вопрос более ясным.

У меня есть три массива данных:

• localHeroes определяется в app.component.ts

• dbHeroes извлекается из базы данных (Firebase) и получает данные присваивается пустой массив в app.component.ts

• dbHeroesPredefined извлекается из базы данных, а данные присваиваются предопределенному массиву в app.component.ts

(опять надеюсь, это понятно, что я имею в виду от шлепнуть, но и вставляя соответствующие выдержки ниже)

Все наборы данных могут быть отображены без проблем с использованием *ngFor.

Доступ свойства:

• {{localHeroes[0].name}} отображает "Бэтмен", как и ожидалось.

• {{dbHeroes[0].name}} ошибки с: "Cannot read property '0' of undefined". Ожидаемый результат для того, чтобы отобразить «Iceman» (имя первого героя в dbHeroes массива, как показано ниже) *

• {{dbHeroesPredefined[0].name}} дисплеи Ironman.

Вопросы:

1. Что мешает мне доступ к данным dbHeroes таким же образом, как и localHeroesdbHeroesPredefined?

2. Почему пример dbHeroes ведет себя по-другому?

3. Есть ли способ получить {{dbHeroes[0].name}} для отображения без предварительного определения массива, на который сопоставляются данные, как в примере dbHeroesPredefined?

Полный пример можно найти на этом plunk. Внимательно оцените любую помощь в понимании этого.

Сноска: Исходя из этого post я думаю, с помощью дополнительных параметров ? может быть способом решить эту проблему. Что-то вроде {{dbHeroes?[0].name}} не помогло в этом случае, но так как объяснений вокруг этого ответа не было, поэтому я хотел бы быть более четким в вопросе и решении.

dbHeroes массива в формате JSON:

dbHeroes: [ 
    { 
    "name": "Iceman" 
    }, 
    { 
    "name": "Fireman" 
    }, 
    { 
    "name": "Postman" 
    }, 
    { 
    "name": "Angry Clive" 
    } 
] 

dbHeroesPredefined массива в формате JSON:

dbHeroesPredefined: [ 
    { 
    "name": "Ironman" 
    }, 
    { 
    "name": "Pacman" 
    }, 
    { 
    "name": "Sonywalkman" 
    }, 
    { 
    "name": "Intimidating Kenneth" 
    } 
] 

app.component:

import { Component, OnInit } from '@angular/core'; 
import { DataService } from './data.service'; 


@Component({ 
    moduleId: module.id, 
    selector: 'my-app', 
    templateUrl: 'app.component.html' 
}) 

export class AppComponent implements OnInit { 

    dbHeroes?: any[]; 

    localHeroes: any[] = [ 
    {name: 'Batman'}, 
    {name: 'Spiderman'}, 
    {name: 'Dustinhoffman'}, 
    {name: 'The Incredible Dave'} 
    ]; 

    dbHeroesPredefined: any[] = [ 
    {name: 'placeholder'}, 
    {name: 'placeholder'}, 
    {name: 'placeholder'}, 
    {name: 'placeholder'} 
    ]; 

    constructor(private dataService: DataService) { } 

    ngOnInit() { 

     this.dataService 
      .getEntryData('dbHeroes') 
      .subscribe(
      (dbHeroes:any) => 
      this.dbHeroes = (dbHeroes) 
     ); 

     this.dataService 
      .getEntryData('dbHeroesPredefined') 
      .subscribe(
      (dbHeroesPredefined:any) => 
      this.dbHeroesPredefined = (dbHeroesPredefined) 
     ); 
    } 
} 

Answer 1

Это потому, что dbHeroes не имеет присвоенного ему значения в момент, когда Angular разрешает привязки, но вместо этого получает значение, назначенное только позже, когда приходит ответ от сервера.

Вы можете работать вокруг с

<div *ngIf="dbHeroes">Sub in {{dbHeroes[0].name}} results in failure </div> 

или

<div>Sub in {{dbHeroes && dbHeroes[0].name}} results in failure </div> 

Plunker example