无法读取属性'；有效载荷'；of undefined-通过Typescript访问JSON对象，并通过*ngFor进行绑定

我尝试使用节点角度和http请求从服务器获取高分

我从服务器获取JSON文件，但我无法访问字段以便在*ngFor中处理它们

对于属性有效负载，我得到以下错误：

core.umd.js:3472 EXCEPTION: Error in ./ScoreListComponent class      ScoreListComponent - inline template:18:5 caused by: Cannot read property 'payload' of undefined

它使用普通java脚本在浏览器的开发控制台上工作，但不使用它的给定类型脚本变体

import { Component, Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { FormsModule } from '@angular/forms';
import 'rxjs/add/operator/map';

import { ScoreService } from './score.service';

@Component({
  selector: 'scoreList',
  template: `
      <h2>High Scores</h2>
      <table class="table table-striped">
        <thead>
         <tr>
           <th>Rank</th>
           <th>Name</th>
           <th>Score</th>
         </tr>
       </thead>
       <tbody>
         <tr *ngFor="let score of scoreList; let rank = index">
           <td>{{rank + 1}}</td>
           <td>{{score.name}}</td>
           <td>{{score.score}}</td>
         </tr>
       </tbody>
     </table>
     <button
       type="button"
       class="btn btn-success"
       (click)="refresh()">
         refresh
     </button>
      `,
      providers: [ ScoreService ]
})

以下是我们从服务器接收到的JSON对象：

（来源：）

---

关于如何通过Typescript命令访问负载的Scores数组中的对象，有什么建议吗？

如果我理解正确，在

ScoreListComponent

定义之前不应该有任何

@Injectable

装饰器。应该只有

@Component

装饰器，其后面紧跟着类声明：

@Component({
  ...
})
export class ScoreListComponent { ... }

---

如果我理解正确的话，在

ScoreListComponent

定义之前不应该有任何

@可注入的
装饰器。应该只有
@Component
装饰器，其后面紧跟着类声明：

@Component({
  ...
})
export class ScoreListComponent { ... }

此.scorelist[0]
在您尝试访问它时未定义，您必须等待http调用完成后才能访问它

  refresh() {
    console.log('refresh, implement a server refresh method')
    this.getScores()
    .map(response => response.json())
    .subscribe((response) =>{
        this.scoreList.push(response)
        //here it is defined
        console.log(this.scoreList[0].payload.scores)
        for(let entry of this.scoreList.entries()){
          console.log(entry);
        }
      }
    );
    //here it is not as the http call has not finised
    console.log(this.scoreList[0]); // <- this will throw an exception
  }

refresh（）{
console.log（'刷新，实现服务器刷新方法'）
这是getScores（）
.map（response=>response.json（））
.订阅（（响应）=>{
this.scoreList.push（响应）
//这里定义了它
console.log（this.scoreList[0].payload.scores）
for（让此.scoreList.entries（）的条目）{
控制台日志（条目）；
}
}
);
//这里不是因为http调用尚未完成
console.log（this.scoreList[0]）；//
此.scoreList[0]
在您尝试访问它时未定义，您必须等待http调用完成才能访问它

  refresh() {
    console.log('refresh, implement a server refresh method')
    this.getScores()
    .map(response => response.json())
    .subscribe((response) =>{
        this.scoreList.push(response)
        //here it is defined
        console.log(this.scoreList[0].payload.scores)
        for(let entry of this.scoreList.entries()){
          console.log(entry);
        }
      }
    );
    //here it is not as the http call has not finised
    console.log(this.scoreList[0]); // <- this will throw an exception
  }

refresh（）{
console.log（'刷新，实现服务器刷新方法'）
这是getScores（）
.map（response=>response.json（））
.订阅（（响应）=>{
this.scoreList.push（响应）
//这里定义了它
console.log（this.scoreList[0].payload.scores）
for（让此.scoreList.entries（）的条目）{
控制台日志（条目）；
}
}
);
//这里不是因为http调用尚未完成
console.log（this.scoreList[0]）；//为true，但似乎不相关