Angular2 TypeError: val.slice is not a function. Issue with Primeng datatable and nested data

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 table，它工作正常。

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

我对嵌套结构使用数据table的方式有误吗？我应该如何正确定义我的html中的第二个数据table？欢迎任何意见。

Answer 1

我的问题是我最初没有将数据 table 绑定到数组。我认为您的问题与所选种族相同。您正在将其初始化为 null 而不是数组。

这是我的愚蠢错误：

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

应该是：

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

对于你我认为是这样的：

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

应该是这样的：

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

Angular2 TypeError: val.slice is not a function. Issue with Primeng datatable and nested data

Angular2 TypeError: val.slice is not a function. Issue with Primeng datatable and nested data

angular

primeng

primeng-datatable