使用* ngFor

Question

我正在尝试迭代对象的Array属性，如下所示：

<p>
  Editing Course : {{course?.name}}<br/>
  Course Outward Par : {{course?.getOutwardPar('MEDAL')}}<br/>
  Course Outward Yards : {{course?.getOutwardYards('MEDAL')}}
</p>

<div class="container">
  <h1>Course Form</h1>
  <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
    <div class="form-group">
      <table>
        <tr>
          <td><label for="name">Name</label></td>
          <td><input type="text" class="form-control" id="name" name="name" required
                     [(ngModel)]="course && course.name">
          </td>
        </tr>

        <tr>
          <input type="number" class="form-control" id="hole1" name="hole1" required
                 [(ngModel)]="course && course.holes[1].tees['MEDAL'].par">
        </tr>

        <!-- 
             --- BROKEN HERE---
         -->
        <tr *ngFor="let hole of course?.holes">
          <td>{{hole.name}}</td>
        </tr>

      </table>
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

* ngFor之前的所有内容都按预期工作，包括以下内容，因此holes的属性course肯定会被视为数组。否？

<input type="number" class="form-control" id="hole1" name="hole1" required
                     [(ngModel)]="course && course.holes[1].tees['MEDAL'].par">

ngFor触发错误：

找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays。

这里有一些关于这个问题的讨论https://github.com/angular/angular/issues/6392。 robwormald的帖子暗示了？ opertaor可用于此类情况。

Answer 1

好吧，看来Angular 2不支持在* ngFor

中使用关联数组/字典

e.g。具有以下结构的JSON。

参见例如：

Iterate over TypeScript Dictionary in Angular 2

我可以通过在Component中创建一个键变量并迭代它来实现这一点。其他解决方案建议使用指令，但以后会使用指令。

e.g。

    var checked = $(this).checked ? 1 : 0;
and
    var checked = $(this).is(":checked") ? 1 : 0;
and
    if ($(this).checked) {
        checked = 1;
    } else {
        checked = 0;
    }

并迭代键

keys: string [];
this.keys = Object.keys(this.course.holes);

来源JSON：

<tr *ngFor="let key of keys">
  <td>{{key}}</td>
  <td>{{course.holes[key].name}}</td>
  <td>
    <input type="number" class="form-control" id="hole{{key}}" name="holePar{{key}}"
           [(ngModel)]="course && course.holes[key].tees['MEDAL'].par"/>
  </td>
  <td>

        <input type="number" class="form-control" id="hole{{key}}" name="holeLength{{key}}"
               [(ngModel)]="course && course.holes[key].tees['MEDAL'].length"/>
      </td>
    </tr>