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

Question

我有一个 angular 组件来从 BE 返回数据并将其显示在p-table

这是组件的html

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

这是我如何实现组件逻辑

  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;
      });
  }
}

当我点击按钮时，我需要从 BE 获取数据

在控制台中，我得到了这个

在这个错误中

core.js:4197 错误错误：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)

我该如何解决这个问题？

Answer 1

Prime Table 需要一个数组，你给它一个对象。 我相信你应该有

this.filteredRestaurants = r.restaurants;