访问属性：

Question

我试图将此问题与此plunk中的3个示例相关联。希望它有助于使问题更清晰。

我有三个数据阵列：

localHeroes在app.component.ts
dbHeroes，并在app.component.ts中将数据分配给空数组
dbHeroesPredefined从数据库中获取，数据被分配到app.component.ts中的预定义数组

（再次希望我明白我的意思是什么，但也粘贴下面的相关摘录）

使用*ngFor可以毫无问题地显示所有数据集。

访问属性：

{{localHeroes[0].name}}显示＆＃34;蝙蝠侠＆＃34;正如所料。
{{dbHeroes[0].name}}错误："Cannot read property '0' of undefined"。预期的结果是它显示＆＃34;冰人＆＃34; （dbHeroes数组中第一个英雄的名字，如下所示）*
{{dbHeroesPredefined[0].name}}显示Ironman。

的问题：

什么阻止我以与dbHeroes和localHeroes相同的方式访问dbHeroesPredefined数据？
为什么dbHeroes示例的行为有所不同？
有没有办法让{{dbHeroes[0].name}}显示，而无需预先定义数据映射到的数组，如dbHeroesPredefined示例中所示？

此plunk上提供了完整的示例。非常感谢您理解这一点的任何帮助。

脚注：基于此post，我猜使用可选参数?可能是解决问题的一种方法。像{{dbHeroes?[0].name}}之类的东西在这种情况下没有帮助，但由于没有解释这个答案，所以我希望在问题和解决方案上更清楚。

dbHeroes数组：

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

dbHeroesPredefined数组：

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

Angular 2 - 尝试使用数据服务

访问属性：

的问题：

1 个答案: