錯誤迭代對象的嵌套Array屬性使用* 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工作course的holes肯定可以被認爲是一個數組。沒有？

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

的ngFor觸發錯誤：

無法找到一個不同支承對象類型「對象」的「[對象的對象]」。 NgFor僅支持與陣列等Iterables綁定。

這裏有一些dicusssion https://github.com/angular/angular/issues/6392關於這個問題。 robwormald的帖子表明，在這種情況下可以使用操作器。

Answer 1

好它出現折角2不支持在* ngFor

例如使用關聯數組/字典JSON的結構如下。

見例如：

Iterate over TypeScript Dictionary in Angular 2

我能得到這個通過簡單地創建一個鍵在組件變量並遍歷該工作。其他解決方案建議使用指令但稍後。

例如

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

並遍歷鍵

<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> 

來源JSON：

{ 
    "name": "Ny Course", 
    "courseTeeSets": [], 
    "holes": { 
     "1": { 
      "id": 1, 
      "number": 1, 
      "name": "Hole Number 1", 
      "tees": { 
       "MEDAL": { 
        "id": 3, 
        "teeType": "MEDAL", 
        "length": 100, 
        "strokeIndex": 15, 
        "par": 8 
       }, 
       "MENS": { 
        "id": 1, 
        "teeType": "MENS", 
        "length": 509, 
        "strokeIndex": 15, 
        "par": 5 
       }, 
       "LADIES": { 
        "id": 2, 
        "teeType": "LADIES", 
        "length": 489, 
        "strokeIndex": 15, 
        "par": 5 
       } 
      } 
     }, 
     "2": { 
      "id": 2, 
      "number": 2, 
      "name": "Hole Number 2", 
      "tees": { 
       "MEDAL": { 
        "id": 4, 
        "teeType": "MEDAL", 
        "length": 110, 
        "strokeIndex": 9, 
        "par": 8 
       }, 
       "MENS": { 
        "id": 6, 
        "teeType": "MENS", 
        "length": 191, 
        "strokeIndex": 9, 
        "par": 4 
       }, 
       "LADIES": { 
        "id": 5, 
        "teeType": "LADIES", 
        "length": 171, 
        "strokeIndex": 9, 
        "par": 4 
       } 
      } 
     } 
    } 
}