错误：InvalidPipeArgument：primeng 表中管道“SlicePipe”的“[object Object]”

Question

I have a component in angular to return data from BE and show it in p-table

Here is html of component

<p-table [value]="filteredRestaurants" [paginator]="true" [rows]="10">
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Cuisine Types</th>
      <th>Rating</th>
      <th>Avialability</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-restaurant>
    <tr>
      <td>{{ restaurant.name }}</td>
      <td>{{ restaurant.adress.city }}</td>
      <td></td>
      <td>{{ restaurant.starRating }}</td>
      <td></td>
    </tr>
  </ng-template>
</p-table>

and here is how I realize component logic

  export class AppComponent {
  postCodes: any[] = [];
  selectedPostCode: string;
  filteredRestaurants: any;
  constructor(private mapboxService: MapboxService, private http: HttpClient) {}
  title = 'just-eat-angular';
  headers = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
    }),
  };
getResults() {
    return this.http
      .post(
        environment.baseUrl + '/PostCodeSearch/GetRestaurantsByPostCode',
        JSON.stringify(this.selectedPostCode),
        this.headers
      )
      .subscribe((r) => {
        console.log(r);
        this.filteredRestaurants = r;
      });
  }
}

When I click the button, I need to get data from BE

In the console, I got this

And in this error

core.js:4197 ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'SlicePipe' at invalidPipeArgumentError (common.js:4152) at SlicePipe.transform (common.js:5154) at Module.ɵɵpipeBind3 (core.js:24715) at TableBody_ng_container_0_Template (primeng-table.js:167) at executeTemplate (core.js:7303) at refreshView (core.js:7172) at refreshEmbeddedViews (core.js:8280) at refreshView (core.js:7196) at refreshComponent (core.js:8326) at refreshChildComponents (core.js:6965)

How I can fix this?

Answer 1

Prime Table expects an array and you give it an Object. I believe you should have

this.filteredRestaurants = r.restaurants;