Angular报错：无法找到支持[object Object]的差异器问题求助

你遇到的错误核心是：personnelPosteListe是单个对象（{...}），但*ngFor只能遍历数组（[...]）这类可迭代对象，从你提供的JSON数据能明确看到personnelPosteListe是一个单独的人员对象，而非人员数组，直接用*ngFor遍历会触发报错。

根据场景需求，有两种常见处理方式：

方式一：前端将单个对象转为数组（无需修改后端） #

方案1-1：在TS逻辑中处理（推荐，更灵活） #

在获取数据后，判断personnelPosteListe是否为数组，若不是则包装成数组：

onGetPosteListeByID() {
    this.grhService
      .getPosteListeById(this.id)
      .pipe(takeUntil(this.onDestroy$))
      .subscribe(
        (data) => {
          // 兼容单个对象或数组的情况
          data.personnelPosteListe = Array.isArray(data.personnelPosteListe) 
            ? data.personnelPosteListe 
            : [data.personnelPosteListe];
          this.poste = data;
          console.log(this.poste);
        },
        (err) => {
          console.log(err);
        }
      );
  }

方案1-2：直接在HTML模板中处理（快速临时解决） #

把单个对象直接包裹成数组，作为*ngFor的数据源：

<tr *ngFor="let b of (poste?.personnelPosteListe ? [poste.personnelPosteListe] : []); trackBy: trackByMethod ">
    <td> {{ b?.nomPersonnel}}</td>
    <td> {{ b?.prenomPersonnel }}</td>
    <!-- 其他列内容 -->
</tr>

方式二：修改后端API返回格式（规范方案） #

如果业务逻辑中一个岗位对应多个人员，应该让后端把personnelPosteListe返回为数组格式，哪怕只有一个人员数据，也返回：

"personnelPosteListe": [
    {
        "id": 1,
        "nomPersonnel": "ADMIN",
        // 其他字段...
    }
]

这种方式从根源上符合数据结构的语义，后续前端无需额外处理。

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