Angular2 TypeError：val.slice不是函數。問題與Primeng數據表和嵌套數據

Question

下面是我的JSON的結構：

[ 
{ 
    "id": 1, 
    "race_location": "Charlotte-Fall", 
    "year": null, 
    "mec_date": null, 
    "nxs_date": null, 
    "ctws_date": null, 
    "event_details": { 
     "titans": { 
      "required": 5, 
      "drivers": [ 
       "Andrew James Fisher" 
      ], 
      "trailers": [ 
       "T-8" 
      ], 
      "count": 1, 
      "vehicles": [ 
       "C-16" 
      ] 
     }, 
     "coaches": { 
      "required": 3, 
      "drivers": [], 
      "trailers": [], 
      "count": 0, 
      "vehicles": [] 
     }, 
     "nxs": { 
      "required": 4, 
      "drivers": [ 
       "Todd Michael Bixby", 
       "David Alan Vestal", 
       "Mark A Hadley", 
       "Bryan L Kleinsasser" 
      ], 
      "trailers": [ 
       "T-24", 
       "T-35", 
       "AT-4", 
       "T-29" 
      ], 
      "count": 4, 
      "vehicles": [ 
       "C-38", 
       "C-30", 
       "C-21", 
       "C-37" 
      ] 
     }, 
     "wheels": { 
      "required": 4, 
      "drivers": [], 
      "trailers": [], 
      "count": 0, 
      "vehicles": [] 
     }, 
     "cups": { 
      "required": 13, 
      "drivers": [ 
       "David Andrew Charest" 
      ], 
      "trailers": [ 
       "T-4" 
      ], 
      "count": 1, 
      "vehicles": [ 
       "C-48" 
      ] 
     }, 
     "tvs": { 
      "required": 2, 
      "drivers": [ 
       "Robin Eugene Angle", 
       "Christopher Alan Beach" 
      ], 
      "trailers": [ 
       "F-6", 
       null 
      ], 
      "count": 2, 
      "vehicles": [ 
       "C-40", 
       "C-44" 
      ] 
     } 
    } 
}, 
{... 
} 
] 

component.ts：

export class RacescheduleComponent implements OnInit { 
    races: any[]=[]; 
    selectedRace: null; 
    errorMessage: string; 

    public constructor(private eventService: EventService, private 
router: Router) { } 

    ngOnInit() { 
    this.eventService.getList('race_schedule') 
    .subscribe(races => { 
    var races_ = []; 
    this.races = races.map((race) => { 
     var progress = 0; 

     if (race.event_details.cups.count >= race.event_details.cups.required) { 
     progress += 50 ; 
     } 
     if (race.event_details.nxs.count >= race.event_details.nxs.required) { 
     progress += 50 ; 
     } 

     race.total_progress = progress; 
     return race; 
    }); 
    }, error => this.errorMessage = <any>error); 
    } 

selectRace(e) { 
this.selectedRace = e.data; 
} 
} 

component.html：

<div id="wrapper" class="container"> 
<app-navbar></app-navbar> 
<div style="margin: 70px auto;width:100%"> 
    <h1>Race Schedule</h1> 
    <h5>Click a race to view details</h5> 
    <p-dataTable [value]="races" scrollable="true" scrollHeight="500px" 
    selectionMode="single" (onRowClick)="selectRace($event)"> 
    <p-header>Races</p-header> 
    <p-column field="race_location" header="Race Location" [style]=" 
    {'width':'150px'}"></p-column> 
    <p-column field="total_progress" header="Schedule Completion Status 
    (%)" [style]="{'width':'150px'}"> 
    </p-column> 
    </p-dataTable> 

<div *ngIf="selectedRace" class="table-responsive" 
style="overflow:auto"> 
    <h3> <i class="fa fa-flag-checkered fa-2x"></i> {{ 
    selectedRace.race_location}}</h3> 
    <p-dataTable [value]="selectedRace"> 
    <p-header>Cup Box Trailers</p-header> 
    <p-column field="event_details.nxs.drivers" header="Driver" 
    [style]="{'width':'150px'}"></p-column> 
    <p-column field="event_details.nxs.vehicles" header="Tractor" 
    [style]="{'width':'150px'}"> 
    </p-column> 
    <p-column field="event_details.nxs.trailers" header="Trailer" 
    [style]="{'width':'150px'}"> 
    </p-column> 
    </p-dataTable> 
</div> 
</div> 
</div> 

我得到的錯誤而運行這個是：

VM2628 RacescheduleComponent.ngfactory.js:699 ERROR TypeError: 
val.slice is not a function 
at DataTable.set [as value] (VM2529 vendor.bundle.js:130001) 
at updateProp (VM2529 vendor.bundle.js:15822) 
at checkAndUpdateDirectiveInline (VM2529 vendor.bundle.js:15514) 
at checkAndUpdateNodeInline (VM2529 vendor.bundle.js:16946) 
at checkAndUpdateNode (VM2529 vendor.bundle.js:16914) 
at debugCheckAndUpdateNode (VM2529 vendor.bundle.js:17544) 
at debugCheckDirectivesFn (VM2529 vendor.bundle.js:17485) 
at Object.View_RacescheduleComponent_1.co [as updateDirectives] (VM2628 
RacescheduleComponent.ngfactory.js:1177) 
at Object.debugUpdateDirectives [as updateDirectives] (VM2529 
vendor.bundle.js:17470) 
at checkAndUpdateView (VM2529 vendor.bundle.js:16882) 

如果我使用下面的常規html表格，它工作正常。

<div class="text-left"><h4><i class="fa fa-truck fa-2x"></i> Cup Box 
Trailers</h4></div> 
    <table class="table table-striped"> 
    <thead> 
    <tr class="info"> 
     <th>Driver</th> 
     <th>Tractor</th> 
     <th>Trailer</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let driver of selectedRace.event_details.cups.drivers; 
    index as i"> 
     <td>{{ driver }}</td> 
     <td>{{ selectedRace.event_details.cups.vehicles[i] }}</td> 
     <td>{{ selectedRace.event_details.cups.trailers[i] }}</td> 
    </tr> 
    </tbody> 
    </table> 

是我使用數據表的嵌套結構的方式錯了嗎？我應該如何正確定義我的html中的第二個數據表？任何輸入讚賞。

Answer 1

我的問題是，我沒有將數據表最初綁定到數組。我認爲你的問題與選定的比賽是一樣的。您將它初始化爲null而不是數組。

這是我愚蠢的錯誤：

ngOnInit() { 
this.lotteries = <ILottery[]>{}; 
... 

應該是：

ngOnInit() { 
this.lotteries = <ILottery[]>[]; 
... 

爲了你，我覺得這一點：

races: any[]=[]; 
selectedRace: null; 

應該是這樣的：

races: any[]=[]; 
selectedRace: any[]=[];