エラー* ngFor

Question

は、私は以下のようにオブジェクトの配列プロパティを反復処理しようとしています：

<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は確実に配列とみなすことができます。いいえ？

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

ngForはエラーをトリガ：

は型 'オブジェクト' が異なるサポート対象 '[Objectオブジェクトを]' が見つかりません。 NgForは、配列などのIterablesへのバインドのみをサポートしています。

ここにいくつかの相違があります。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 
       } 
      } 
     } 
    } 
}