Question

我想读取一个json文件并在表中显示这些值。我试过了

this.http.get('./data/file.json')
   .map(response => response.json())
   .subscribe(result => this.results =result,
    function(error) { console.log("Error happened" + error)}, 
    function() { console.log(this.results)});

和此：

this.http.get("./data/file.json")
  .map(response => { return <ITest[]>(<ITest[]>response.json())})
  .subscribe(result => this.results =result,
    function(error) { console.log("Error happened" + error)}, 
    function() { console.log(this.results)});

但我总是在控制台中获得undefined。 GET响应没问题，我可以在调试器的网络视图中看到响应。我不知道自己错过了什么。

html看起来像：

 <ng-container  *ngFor='let stat of results;let i = index' [attr.data-index]="i">
   <tr>
      <td style="text-align:left!important;" class="table-row">{{stat.Name}}</td>
      <td class="table-row"> </td>
      <td class="table-row">{{stat.Age}} </td>
   </tr>
   <tr *ngFor="let subitem of stat.Intervals">
      <td style="text-align:right!important;">{{subitem.StartDate}}</td>
      <td>{{subitem.EndDate}}</td>
      <td >{{subitem.Duration}}</td>
   </tr>
</ng-container>

Answer 1

使用箭头操作符=>代替function()。如果您使用function()，则会忽略this的范围，因此未定义。

    this.http.get('./data/file.json')
                      .map(response => response.json())
                      .subscribe(result => this.results =result,
                         error=> console.log(error),
                         () => console.log(this.results));

Answer 2

请勿在模板中使用async，因为您是手动订阅的。如果您不使用subscribe ，则使用async，因为它会为您订阅。

另外，使用胖箭头语法来保持this的上下文，就像Amit所说的那样。所以将代码更改为Amit所呈现的内容：

this.http.get('./data/file.json')
   .map(response => response.json())
   .subscribe(result => this.results =result,
     error=> console.log(error),
     () => console.log(this.results));

至于为什么模板中没有显示任何内容是因为您使用了错误的属性名称。这是区分大小写的，因此您收到的回复会根据您的评论包含属性Name和Age。因此，您需要在迭代中使用stat.Age和stat.Name。

<ng-container *ngFor='let stat of results;let i = index' [attr.data-index]="i">
   <tr >
     <td style="text-align:left!important;" class="table-row">{{stat.Name}}</td>
     <td class="table-row"> </td>
     <td class="table-row">{{stat.Age}} </td>
   </tr>
</ng-container>

读取json文件并以角度显示值

2 个答案: