*ngFor on ng-template outputs nothing Angular2

Question

Not sure why my *ngFor loop is printing nothing out. I have the following code in an html file:

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

Then, in my simple component I have the following:

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': 'email1@gmail',             'company': 'company',             'status': 'Complete'         },         {             'name': 'name2',             'email': 'email2@gmail',             'company': 'company',             'status': 'Incomplete'         }     ];     constructor() {} } 

When I run this code, I get zero output. Even weirder is that when I select the element using debug tools I see this:

Looks like it correctly recognizes my object, but then outputs nothing.

Answer 1

I think what you want is

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

or

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

Answer 2

For getting index as well: <ng-template ngFor let-xb [ngForOf]="tempData" let-index="index">