Angular调用Laravel API时响应对象无法映射为键值对问题咨询

解决思路 #

你的问题核心是Laravel API 默认会把资源集合嵌套在响应对象的data字段中，你当前直接将整个响应对象赋值给products数组，相当于把外层响应对象存进了数组，自然无法直接读取内部单条数据的键值对。

具体实现方案 #

方案1：直接在组件订阅时提取内层数据

修改app.component.ts的订阅逻辑，从响应中取出data字段赋值：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

// 提前定义数据类型保证类型安全，字段和你后端返回的对应即可
interface Product {
  id: number;
  name: string;
  // 补充其他你需要的字段
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  // 用定义好的类型约束数组
  products: Product[] = [];

  constructor (private dataService: DataService ) {}

  ngOnInit() {
    this.dataService.sendGetRequest().subscribe((res: any)=>{
      // 提取内层的data数组，就是你要的单条数据集合
      this.products = res.data;
      // 可以打印验证结构
      console.log(this.products);
    });
  }
}

方案2：在Service层统一处理响应结构（更推荐）

借助RxJS的map操作符提前剥除外层嵌套，组件直接拿到可用数组：
先修改data.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
// 也可以单独抽离类型文件统一管理Product类型
interface Product {
  id: number;
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private REST_API_SERVER = "http://127.0.0.1:8000/api/assets";

  constructor(private httpClient: HttpClient) { }

  public sendGetRequest(){
    // 用map提前提取data字段
    return this.httpClient.get<{data: Product[]}>(this.REST_API_SERVER).pipe(
      map(res => res.data)
    );
  }
}

修改后组件的订阅逻辑可以简化为：

this.dataService.sendGetRequest().subscribe((products: Product[])=>{
  this.products = products;
});

渲染验证

在app.component.html中用*ngFor遍历即可读取单条数据的键值对：

<div *ngFor="let product of products">
  <p>ID：{{product.id}}</p>
  <p>名称：{{product.name}}</p>
  <!-- 其他字段同理 -->
</div>

可选后端优化 #

如果不想每次前端都剥层，可以在Laravel的资源类中关闭默认包裹：

// 对应的AssetResource类中
public function withoutWrapping()
{
    return parent::withoutWrapping();
}

修改后接口会直接返回数组，前端不需要再提取data字段。

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