角度2 ngForが

Question

プロパティにアクセスするとき、私はangular2チュートリアルをfollwingとArrayを反復しようとしています未定義ます：

<table class = "table table-hover"> 
    <thead> 
     <th>ID</th> 
     <th>Title</th> 
     <th>Descreption</th> 
    </thead> 
    <tbody> 
     <tr *ngFor = "#v of videos"></tr> 
     <td>{{v.id}}</td> 
     <td>{{v.title}}</td> 
     <td>{{v.desc}}</td> 
    </tbody> 

</table> 

私が手にエラーがCannot read property 'id' of undefinedですが、私は同じ HTMLでオブジェクトを印刷するとき：

<!--printing the same object --> 
{{videos[0] | json}} 

期待どおりには、例えば、オブジェクトを示す：

{ "id": 1, "title": "title..", "videoCode": "afe6JW2oTZc", "desc": "My Videos" } 

私はjsonパイプ試してみました - {{v.id | json}}を、そしてまだそれは、任意のヘルプ

おかげで動作しません。

Answer 1

あなたは間違ったチュートリアルに従っています。 #vの使用法は非常に古い構文であり、ベータ版になってから使用されていません。新しい構文はletキーワード使用しています。一方

を、あなたはtrループの中ではなく、それ以外でごtdを置く必要があります。

<table class="table table-hover"> 
    <thead> 
     <th>ID</th> 
     <th>Title</th> 
     <th>Descreption</th> 
    </thead> 
    <tbody> 
     <tr *ngFor="let v of videos"> 
      <td>{{v.id}}</td> 
      <td>{{v.title}}</td> 
      <td>{{v.desc}}</td> 
     </tr> 
    </tbody> 
</table> 

をおそらく私が言った2つ目はここにあなたの問題ですしかし、より大きな問題は古いバージョンの角度を使用していることだと私は信じています。ただ、angular.ioに頭の上と

Answer 2

#がlet keyworkdに置き換えられていますが、チュートリアルを取ります。 あなたが非同期コールを扱っているなら、あなたは、データがロードされるまでは、*ngIfを使用することができます

<tbody>       
     <tr *ngFor = "let v of videos"> 
     <td>{{v?.id}}</td> 
     <td>{{v?.title}}</td> 
     <td>{{v?.desc}}</td> 
     </tr> 
</tbody> 

OR

、以下に示すような特性の遅延結合のための?.演算子を使用する必要があります

<table class = "table table-hover" *ngIf="videos"> //<<<===here 
    <thead> 
     <th>ID</th> 
     <th>Title</th> 
     <th>Descreption</th> 
    </thead> 
    <tbody> 
     <tr *ngFor = "let v of videos"> 
     <td>{{v.id}}</td> 
     <td>{{v.title}}</td> 
     <td>{{v.desc}}</td> 
     </tr> 
    </tbody> 

</table>