为何*ngFor循环重复渲染数据？Angular NG Bootstrap问题

问题根源分析 #

你遇到的重复渲染问题，核心原因是错误地将ngbAccordionBody组件和ngbAccordionCollapse指令绑定在了同一个DOM元素上。NG Bootstrap的Accordion组件在这种结构下会重复解析内容，导致列表被渲染两次。

另外，移除ng-container的ngIf后报错，是因为初始状态下card.contacts为null，直接用*ngFor遍历null会触发Angular模板错误。

修正方案 #

1. 调整Accordion结构，正确使用ngbAccordionCollapse #

按照NG Bootstrap的标准用法，将ngbAccordionCollapse指令移到内部的ng-template上，避免内容被重复解析：

<div ngbAccordion class="accordion accordion-flush">
  <div ngbAccordionItem class="accordion-item">
    <h3 ngbAccordionHeader class="accordion-header">
      <button
        ngbAccordionButton
        class="accordion-button text-secondary fs-5 ps-0"
      >
        Contacts
      </button>
    </h3>
    <ngbAccordionBody>
      <ng-template ngbAccordionCollapse>
        <div class="accordion-body row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3">
          <!-- 用空数组兜底避免null遍历报错，替代ng-container的ngIf -->
          <div 
            *ngFor="let contact of card.contacts || []" 
            class="col"
          >
            <app-contact-card [contact]="contact"></app-contact-card>
          </div>

          <!-- 单独处理空状态 -->
          <div 
            *ngIf="!card.contacts || card.contacts.length === 0" 
            class="text-secondary"
          >
            No contacts
          </div>
        </div>
      </ng-template>
    </ngbAccordionBody>
  </div>
</div>

2. 优化空值判断逻辑 #

通过card.contacts || []的方式，在card.contacts为null或undefined时给*ngFor提供空数组，既避免报错，又省去额外的ng-container嵌套。

3. 可选：添加trackBy函数优化渲染（若需） #

如果后续存在渲染性能问题，可添加trackBy函数帮助Angular正确跟踪列表项：
在组件类中定义：

trackContactById(index: number, contact: any): string {
  return contact.id; // 替换为你的联系人数据中唯一标识字段
}

模板中使用：

<div 
  *ngFor="let contact of card.contacts || []; trackBy: trackContactById" 
  class="col"
>
  <app-contact-card [contact]="contact"></app-contact-card>
</div>

额外排查点 #

• 检查app-contact-card组件是否被意外多次实例化：可在组件的ngOnInit中打印日志，确认每个卡片是否被创建两次。
• 确认card.contacts数据源是否被重复推送：比如HTTP请求订阅是否重复触发，导致数组被多次赋值。

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