Question

如何从 Angular 应用程序中的 http 客户端获取嵌套的 [object Object] 数据？

2021-03-04

2922

angular typescript api angular-httpclient

我在组件中写入特定嵌套数据时遇到问题。我从 api 加载了键数据（品牌），但值嵌套数据（模型）不起作用，只能写入 [object Object]。我从服务器获取到以下数据到控制台：

显示器上显示的内容为： .

在控制台中出现此错误：ERROR TypeError：无法读取未定义的属性“map”。

例如，我期望的是：

AUDI - AUDI (brands)
A1 (models)
A2
A3
A4...

BMW
M1
M3
M5...

您知道如何解决这个问题吗？谢谢你的帮助。

我的代码：

app.component.ts

vehicleLists: VehicleLists[] = [];

  constructor(
    private vehicleService: VehicleService,
    private router: Router,
    private vehicleListAdapter: ListAdapter,
  ) {

  }

  ngOnInit(): void {
    this.getLists();
  }

  public getLists() {
    this.vehicleService.getVehicleLists().subscribe(({ brands, models }) => {
      console.log(brands);
      this.vehicleLists = brands;
      models.map(model =>
        this.vehicleLists.push(this.vehicleListAdapter.adapt(model)));
    });
  }

app.component.html

<div *ngFor="let item of vehicleLists">
  <p>{{item.id}} - {{item.name}}</p>
    <p>{{item.models}}</p>
</div>

lists.ts - 模型

export class VehicleLists {
  id: string;
  name: string;
  models: VehicleModel[];
}

export class VehicleModel {
  name: string;
  description: string;
}

vehicle-list.adapter.ts

export class ListAdapter implements Adapter<VehicleLists> {
  adapt(item: any): VehicleLists {
    const obj = new VehicleLists();
    obj.name = item.name;
    obj.id = item.id;
    obj.models = item.models;
    return obj;
  }
}

vehicle.service.ts

getVehicleLists() {
    return this.http.get<any>(environment.ApiUrl + `/api/url`);
  }

Answer 1

您看到的是正常行为，完全在意料之中。您不能在 html 中使用对象并期望其内容得到呈现。由于 item.models 是一个数组，而且不清楚单个模型的具体结构，但是您有 2 个选项：

在模板中使用 json 管道：

<div *ngFor="let item of vehicleLists">
  <p>{{item.id}} - {{item.name}}</p>
  <p>{{item.models | json}}</p>
</div>

在模型上使用另一个 ngFor，并为每个模型指定要显示的字段：

<div *ngFor="let item of vehicleLists">
  <p>{{item.id}} - {{item.name}}</p>
  <p *ngFor="let model of item.models>{{model.name}}</p>
</div>

Answer 2

虽然我不知道原因，但类似的事情经常发生在我身上。这有点愚蠢，但你可以尝试这样的方法。

let myObj = {
  "id": "audi",
  "name": "audi",
  "models": ["a1", "a2", "a3"]
};
let models = [];
let values = Object.values(myObj);
for(var value of values){
  if(Array.isArray(value)) {
    let newObj = new Object();
    newObj["id"] = values[values.indexOf(value) - 2];
    newObj["name"] = values[values.indexOf(value) - 1];
    newObj["models"] = value;
    models.push(newObj);
  }
}

循环遍历数组中的每个对象。 models 数组不应再显示为 [object object]