Angular2 TypeError: val.slice ist keine Funktion. Problem mit Primeng Datentabelle und verschachtelte Daten

Question

Unten ist die Struktur meiner 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> 

Der Fehler, den ich bekommen während des Laufens ist dies:

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) 

Wenn ich eine normale HTML-Tabelle unten verwende, funktioniert es gut.

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

Ist die Art, wie ich Datatable für die verschachtelte Struktur verwende falsch? Wie soll ich die zweite Datentabelle in meinem HTML korrekt definieren? Jede Eingabe wird geschätzt.

Answer 1

Mein Problem damit war, dass ich die Datentabelle anfänglich nicht an ein Array gebunden habe. Ich denke, dein Problem ist das selbe mit dem ausgewählten Rennen. Sie initialisieren es auf null statt auf ein Array.

Dies war meine dummen Fehler:

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

werden sollten:

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

Für Sie, ich denke, das ist:

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

etwas sein sollte wie:

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