Angular中如何渲染API返回的单个车辆对象数据？

问题根源 #

*ngFor 是 Angular 专门用于迭代数组/可迭代对象的指令，你当前拿到的是单个车辆对象而非数组，因此遍历指令无法生效。

具体解决步骤 #

1. 组件内调整变量与赋值逻辑

将原本用于存储数组的变量改为单个对象类型，直接接收服务返回的结果：

import { Component } from '@angular/core';
import { KentekencheckService } from './your-service-path';

// 推荐定义类型接口（可选但更规范）
interface Vehicle {
  merk: string;
  handelsbenaming: string;
  // 根据API返回的其他字段补充
}

@Component({
  selector: 'app-vehicle-detail',
  templateUrl: './vehicle-detail.component.html'
})
export class VehicleDetailComponent {
  // 定义单个车辆对象变量，初始为undefined
  vehicle: Vehicle | undefined;

  constructor(private kentekencheckService: KentekencheckService) {}

  getVehicleByLicensePlate(licensePlate: string) {
    this.kentekencheckService.getVehicle(licensePlate).subscribe(data => {
      this.vehicle = data; // 直接赋值单个对象，而非数组
      console.log(this.vehicle);
    });
  }
}

2. 模板中直接渲染对象属性

移除*ngFor，直接通过变量访问车辆的各个字段，同时添加空值判断避免报错：

<!-- 先判断vehicle是否存在，避免初始化阶段的空值错误 -->
<div *ngIf="vehicle">
  <h3>车辆信息</h3>
  <p>品牌：{{ vehicle.merk }}</p>
  <p>商用名称：{{ vehicle.handelsbenaming }}</p>
  <!-- 其他字段依此类推 -->
</div>

<!-- 如果字段可能为null，使用安全导航操作符?. 进一步避免报错 -->
<div *ngIf="vehicle">
  <p>品牌：{{ vehicle?.merk }}</p>
  <p>商用名称：{{ vehicle?.handelsbenaming }}</p>
</div>

额外说明 #

• 若后续存在需要处理数组的场景，再使用*ngFor；单个对象直接通过属性访问即可。
• 定义Vehicle接口能让TypeScript帮你做类型检查，避免拼写错误或访问不存在的字段。

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