2017-04-03 2 views
12

なぜ、* ngForループが何も出力していないのか分かりません。私は、htmlファイルに次のコードを持っている:* ng-onテンプレートで何も出力しないAngular2

<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Company</th> 
      <th>Status</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- NGFOR ATTEMPTED HERE -- no content printed --> 
     <ng-template *ngFor="let xb of tempData"> 
      <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle"> 
       <td>{{ xb.name }}</td> 
       <td>{{ xb.email }}</td> 
       <td>{{ xb.company }}</td> 
       <td>{{ xb.status }}</td> 
      </tr> 
      <!-- other content --> 
     </ng-template> 
    </tbody> 
</table> 

その後、私は次のようしている私の単純なコンポーネントで:

import { Component }  from '@angular/core'; 

@Component({ 
    selector: 'my-profile-exhibitors', 
    templateUrl: './profile-exhibitors.component.html', 
    styleUrls: ['./profile-exhibitors.component.scss'] 
}) 
export class ProfileExhibitorsComponent { 
    public tempData: any = [ 
     { 
      'name': 'name1', 
      'email': '[email protected]', 
      'company': 'company', 
      'status': 'Complete' 
     }, 
     { 
      'name': 'name2', 
      'email': 'email2[email protected]', 
      'company': 'company', 
      'status': 'Incomplete' 
     } 
    ]; 
    constructor() {} 
} 

私はこのコードを実行すると、私はゼロ出力を取得します。それは正しく私のオブジェクトを認識するように

enter image description here

が見えるが、その後何も出力しません。でも、奇妙私はデバッグツールを使用して要素を選択したとき、私はこれを見ることです。私はあなたが何をしたいと思います

答えて

26

<ng-container *ngFor="let xb of tempData"> 

または

<ng-template ngFor let-xb [ngForOf]="tempData"> 
+7

感謝です!そして、誰でも 'ng-template'の構文を設計した人は、ステークに火をつける必要があります。 –

+0

あなたが何を不平にしているのかよく分かりません。 Angularテンプレートの構文です。彼らは ''を導入し、 '