angular - 配列内の各オブジェクトの Primeng Datatable を表示しようとしています

Question

オブジェクトの配列内のオブジェクトごとに個別の PrimeNG DataTable を作成しようとしています。これを *ngFor ループで作成して、配列を反復処理し、各インスタンスをテーブルに割り当てようとしました。これを次に示します。

ReferencePage.component.html:

    <div *ngFor="let freight of freights; let i = index ">

    <p-panel panelStyleClass="panelborder" header="Freight Piece {{i}}" 
    [toggleable]="true">


    <p-dataTable [value]="freight" editable="true" styleClass="headercolor" 
    [style]="{'width':'95%'}">
    <p-column field="shipper"    editable="true" header="Shipper"></p-column>
    <p-column field="packinghouse" editable="true" header="Vendor"></p-column>
    <p-column field="pustreet"    header="Street"></p-column>
    <p-column field="pucity"     header="City"></p-column>
    <p-column field="pustate" [style]="{'width':'50px'}"     header="State"></p-column>
    <p-column field="puzip"   [style]="{'width':'70px'}"     header="Zip"></p-column>
    <p-column field="pucarrier"  editable="true" header="Carrier"></p-column>
    <p-column field="pudriver"  editable="true" header="Driver"></p-column>
    <p-column field="pustatus"   editable="true" header="Status"></p-column>
    <p-column field="punumber"   editable="true" header="PU #"></p-column>
    <p-column field="region"  [style]="{'width':'60px'}"    editable="true" header="Region"></p-column>
    <p-column field="pudate"     editable="true" header="Date"></p-column>
    <p-column field="putime"   [style]="{'width':'60px'}"  editable="true" header="Time"></p-column>
    <p-column field="puappt"    editable="true" header="Appt"></p-column>
</p-dataTable>

<div class="buttons">
    <button>Problems</button>
    <button>Driver Note</button>
</div>
</p-panel>
<br/>
</div>

しかし、それを行うと、次のエラーが表示されます: 私のエラーメッセージ

これが私のtsです：

ReferencePage.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { DataTableModule, SharedModule } from 'primeng/primeng';
import { Observable, Subscription } from 'rxjs/Rx';
import { ButtonModule } from 'primeng/primeng';
import { OverlayPanel, PanelModule } from 'primeng/primeng';
import { freightpiece, manifest } from '../shipmentobject';
import { StopService } from '../DeliveryScreen/Services/stop.service';
import 'rxjs/add/observable/of';

@Component({
     selector: 'referencepage',
    styleUrls: ['./ReferencePage.component.css'],
  templateUrl: './ReferencePage.component.html',
  providers: [StopService]


})

export class referencepage implements  OnInit {
  currentRefNumber: string;
  freightnumber: 0;
  tests = [1,2,3,4,5]; 
  freights: freightpiece[];

constructor(private stopservice: StopService){}

ngOnInit(){
  //currentRefNumber = router parameter
  this.currentRefNumber = '999900';
  console.log(this.currentRefNumber);
this.stopservice.search4(this.currentRefNumber)
.subscribe((res: freightpiece[]) => this.freights = res)
}

}