title: ng-container issue with "Error trying to diff..."
body: <p>I use Angular4 + PrimeNG. I need to not repeat template in my html file, so I decided to use <code>ng-container</code> to do so. However, when I use <code>ng-container</code> I'm getting an error: </p>
  
  <blockquote>
    <p>Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed</p>
  </blockquote>
  
  <p>How do I use <code>ng-container</code> with <code>*ngFor</code> clause properly to display the data inside nested <code>dataTable</code>? I cannot access this data, no matter what.</p>
  
  <p>This is how the JSON looks like:</p>
  
  <pre><code>{
  "status": 0,
  "dallases": [{
      "vehicle_id": 17954,
      "dallassettings": "3",
      "dallasupdated": "False",
      "dallas_list": [{
          "number": 666111222,
          "auth": 3
      }, {
          "number": 666777888,
          "auth": 4
      }, {
          "number": 123454321,
          "auth": 4
      }]
  }
  }
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code>export class VehicleService {
      private defUrl = 'dummy.url';
  
  constructor(private http: Http) { }
  getVehicle(username?: string, password?: string) {
      const url = (!username || !password) ? this.defUrl : 'dummy.url' + username + '/' + Md5.hashStr(password);
      return this.http.get(url)
          .map(res =&gt; res.json());
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>export class VehicleComponent implements OnInit {
  
    cols: any[];
  
    ngOnInit() {
      this.cols = [
        { field: 'vehicle_id', header: "Vehicle ID" },
        { field: 'dallassettings', header: 'Dallas settings' },
        { field: 'dallasupdated', header: 'Dallas updated' },
        { field: 'dallas_list', header: 'Dallas list' }
      ];
  
    public vehicles: GeneralVehicle[];
  
    constructor(private vehicleService: VehicleService, private router: Router) {
      this.vehicleService.getVehicle().subscribe(vehicle =&gt; {
        this.vehicles = vehicle;
      });
    }
  
  interface GeneralVehicle {
    status: number;
    dallases: Vehicle[];
  }
  
  interface Vehicle {
    vehicle_id: number;
    dallassettings: string;
    dallasupdated: string;
    dallas_list: DallasList[];
  }
  
  interface DallasList {
    number: number;
    auth: number;
  }
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;div *ngIf="vehicles"&gt;
    &lt;p-dataTable [value]="vehicles.dallases" expandableRows="true"&gt;
      &lt;p-header&gt;List of vehicles: &lt;b&gt;{{currentUser}}&lt;/b&gt;&lt;/p-header&gt;
      &lt;p-column expander="true" styleClass="col-icon"&gt;&lt;/p-column&gt;
      &lt;p-column field="vehicle_id" header="Vehicle ID" [sortable]="true"&gt;&lt;/p-column&gt;
      &lt;p-column field="dallassettings" header="Dallas settings" [sortable]="true"&gt;&lt;/p-column&gt;
      &lt;p-column field="dallasupdated" header="Dallas updated" [sortable]="true"&gt;&lt;/p-column&gt;
      &lt;ng-template let-vehicle pTemplate="rowexpansion"&gt;
        &lt;ng-container *ngFor="let d of vehicles.dallas_list; let i = index; trackBy: trackByFunction"&gt;
          &lt;p-dataTable [value]="d"&gt;
            &lt;p-column field="number" header="Number" [sortable]="true"&gt;&lt;/p-column&gt;
            &lt;p-column field="auth" header="Auth" [sortable]="true"&gt;&lt;/p-column&gt;
          &lt;/p-dataTable&gt;
        &lt;/ng-container&gt;
      &lt;/ng-template&gt;
    &lt;/p-dataTable&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to create a <code>dataTable</code> with expandable rows, where when you expand the row, there's another <code>dataTable</code>, so user can manage data inside expanded row.</p>
  
  <p>Everything is working fine until I click on expansion - at this point it returns an error.</p>
  
  <p>Thanks</p>