Angular无法渲染对象数组中的关联对象问题求助

嘿，问题很明确——你犯了一个典型的数据类型匹配错误：
看你的Collaborator接口定义，entreprise是Entreprise[]类型（也就是数组），但你在模板里直接写了ee.entreprise.name。数组本身没有name这个属性啊！这就像你拿着一个装着苹果的盒子，直接去问盒子“你是什么品种的苹果”，盒子当然答不上来😂。同理，roles也是数组类型，直接输出的话Angular不知道怎么渲染它。

根据你的业务场景，分两种情况处理：

场景1：每个协作者只属于一家企业 #

如果entreprise数组永远只有一个元素，那直接取数组的第一个元素就行：

<p *ngFor="let ee of collaborator"> 
  {{ee.name}} - 
  <!-- 先判断数组存在且有内容，避免空指针报错 -->
  <span *ngIf="ee?.entreprise?.length > 0">
    {{ee.entreprise[0].name}}
  </span>
</p>

场景2：每个协作者属于多家企业 #

如果一个协作者关联多个企业，那就得用*ngFor遍历这个企业数组，把所有企业名称列出来：

<p *ngFor="let ee of collaborator"> 
  {{ee.name}} - 
  <ng-container *ngIf="ee?.entreprise?.length > 0">
    <!-- 用逗号分隔多个企业名称 -->
    <span *ngFor="let ent of ee.entreprise; let last = last">
      {{ent.name}}{{last ? '' : ', '}}
    </span>
  </ng-container>
</p>

关于roles字段的渲染 #

roles是any[]，假设每个角色对象有name属性，同样用遍历的方式展示：

<p *ngFor="let ee of collaborator"> 
  {{ee.name}} 
  <!-- 企业信息 -->
  <ng-container *ngIf="ee?.entreprise?.length > 0">
    <span> - 
      <span *ngFor="let ent of ee.entreprise; let last = last">
        {{ent.name}}{{last ? '' : ', '}}
      </span>
    </span>
  </ng-container>
  <!-- 角色信息 -->
  <ng-container *ngIf="ee?.roles?.length > 0">
    <span> (角色: 
      <span *ngFor="let role of ee.roles; let last = last">
        {{role.name}}{{last ? '' : ', '}}
      </span>)
    </span>
  </ng-container>
</p>

如果你觉得模板里写数组索引或者遍历太麻烦，可以在获取数据时提前处理：

getcoll(){ 
  this.serv.getcollaboratorses().subscribe(res =>{ 
    this.collaborator = res.content.map(coll => {
      return {
        ...coll,
        // 如果企业数组只有一个元素，转成单个对象；否则保留数组
        entreprise: coll.entreprise.length === 1 ? coll.entreprise[0] : coll.entreprise
      };
    }); 
    console.log(res); 
  },err =>{ 
    console.log(err); 
  }); 
}

这样如果是单个企业，模板里就能直接写ee.entreprise.name，不用再处理数组啦！

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