Angular回收站分页加载遇TypeError: Cannot read properties of undefined (reading 'map')

报错核心原因：客户端代码试图读取response.data，但服务端返回的响应本身就是数据数组，并没有data顶层字段，导致response.data为undefined，调用map方法时触发错误。

结合你的代码来看，服务端PHP直接返回了查询到的$result数组，控制台打印的响应也显示返回内容是纯数组，没有外层data包裹。

方法一：修改客户端服务代码（快速修复） #

直接对响应本身做映射，同时补上之前漏传的分页参数：

getAllPanierFichesDeletedForUser(limit: number, offset: number): Observable<Panier[]> {
    const params = new HttpParams()
    .set('limit', limit.toString())
    .set('offset', offset.toString());
    
    return this.httpClient.get(
      this.getDomainApi() + '/v1/panier/deleted', 
      { ...this.getHttpOptions(), params } // 补上分页参数
    ).pipe(
      map((response: any[]) => {
        return response.map((item: any) => deserialize(Panier, item));
      })
    );
  }

方法二：修改服务端代码（规范接口格式） #

如果希望接口返回格式统一（用data字段包裹数据），可以调整PHP控制器的返回值：

#[Route(
    name: 'get_all_fiche_deleted_for_user', path: '/deleted', allowed_methods: [HttpMethod::GET], middleware: [AuthMiddleware::class]
)]
public function getAllFicheDeletedForUser(EntityManager $entity_manager, Request $request, int|Utilisateur $utilisateur = null): array
{
    $queryParam = $request->getQueryParams();

    $limit = isset($queryParam['limit']) ? $queryParam['limit'] : 2;
    $offset = isset($queryParam['offset']) ? $queryParam['offset'] : 0;

    $utilisateurRequest = $request->getAttribute('utilisateur');

    if (is_int($utilisateur)) {
        $utilisateur = $entity_manager->getRepository(Utilisateur::class)->find($utilisateur);
    }

    $result = $entity_manager->getRepository(Panier::class)->getAllFichesdeleted($limit, $offset, $utilisateurRequest);

    // 将结果包裹在data字段中
    return [
        'data' => $result
    ]; 
}

此方法下客户端代码无需修改，但同样要确保补上分页参数的传递。

验证步骤 #

修改后重新发起请求，确认两点：

1. 控制台响应数据能被map正常遍历，无报错
2. 分页参数limit=10和offset=0已正确传递到服务端，加载对应数量的数据

内容的提问来源于stack exchange，提问作者Nathan