Angular中*ngFor遍历自定义接口数组实现每行2个元素的问题

错误原因 #

你代码中的报错逻辑明确：*ngFor里的info是memberInfo数组遍历出来的单个MemberInfo对象，不是数组，你用数值索引[i+1]访问单个对象自然会触发类型错误。同时你当前的写法还会导致重复渲染：每遍历1个元素就生成1行，最终会出现好友信息重复展示、行数翻倍的问题。

解决方案 #

以下提供两种可直接落地的实现方式：

方案1：HTML层直接修复（最小改动） #

仅在索引为偶数的时候渲染行，从memberInfo数组中取对应下标的元素，同时做好奇数个元素的越界兜底判断：

<div class="container">
  <ng-container *ngFor="let info of memberInfo; let i=index">
    <!-- 仅偶数索引生成行，避免重复渲染 -->
    <div class="row" *ngIf="i % 2 === 0">
      <!-- 第一列：当前索引元素必然存在 -->
      <div class="col-6">
        <div class="grid_text">
          <b> {{memberInfo[i].name}} </b>
          <b> {{memberInfo[i].surname}} | </b>
          <b> {{memberInfo[i].email}}  </b>
        </div>
      </div>
      <!-- 第二列：判断索引合法性后再渲染 -->
      <div class="col-6" *ngIf="i+1 < memberInfo.length">
        <div class="grid_text">
          <b> {{memberInfo[i+1].name}} </b>
          <b> {{memberInfo[i+1].surname}} | </b>
          <b> {{memberInfo[i+1].email}}  </b>
        </div>
      </div>
    </div>
  </ng-container>
</div>

方案2：组件层预处理数组（更易维护） #

先在组件里把一维的memberInfo数组切割成每组2个元素的二维数组，模板直接循环行和列即可，逻辑更清晰，后续调整每行展示数量也更方便：

第一步：修改组件类逻辑

export class NetworkComponent implements OnInit {
  member_email!: string
  memberInfo!: MemberInfo[]
  // 新增二维数组，每一项对应一行的好友数据
  memberInfoRows: MemberInfo[][] = []

  constructor(private friendService: FriendService,
              private tokenStorage: TokenStorageService) { }

  ngOnInit(): void {
    this.member_email = this.tokenStorage.getEmail()
    this.friendService.getFriends(this.member_email).subscribe(
      (response: MemberInfo[]) => {
        this.memberInfo = response
        // 切割数组为每组2个元素
        this.memberInfoRows = this.chunkArray(response, 2)
      },
      (error: HttpErrorResponse) =>{
        alert(error.message);
      }
    )
  }

  // 新增数组切割工具方法
  private chunkArray(arr: MemberInfo[], size: number): MemberInfo[][] {
    const result: MemberInfo[][] = []
    for (let i = 0; i < arr.length; i += size) {
      result.push(arr.slice(i, i + size))
    }
    return result
  }
}

第二步：修改模板代码

<div class="container">
  <!-- 循环每一行 -->
  <div class="row" *ngFor="let row of memberInfoRows">
    <!-- 循环当前行的每个好友 -->
    <div class="col-6" *ngFor="let info of row">
      <div class="grid_text">
        <b> {{info.name}} </b>
        <b> {{info.surname}} | </b>
        <b> {{info.email}}  </b>
      </div>
    </div>
  </div>
</div>

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