Angular 17中ngbAccordion内数组push元素后排序异常求助

问题原因分析 #

1. trackBy逻辑缺失/不当：代码里*ngFor指定了trackBy: identify但未实现该函数，Angular无法正确追踪元素身份，渲染时易打乱顺序。
2. 旧语法兼容性问题：Angular 17推荐的@for语法在元素追踪、渲染顺序控制上更稳定，旧版*ngFor在ngbAccordion的上下文环境中可能出现渲染异常。

解决方案 #

1. 替换*ngFor为Angular 17的@for语法 #

用@for配合明确的track表达式（比如元素的唯一ID），确保渲染顺序和数组索引完全一致。

2. 确保元素追踪逻辑正确 #

针对对象数组，通过唯一标识（如id）追踪元素，避免因引用比较导致的渲染混乱。

修改后的完整代码 #

home.html

<div ngbAccordion class="mt-3 accordion-bordered">
  @for (item of array2; track item.id; let idx = $index) {
    <div ngbAccordionItem [collapsed]="true">
      <h2 ngbAccordionHeader class="bg-f7">
        <button ngbAccordionButton>{{item.name}}</button>
      </h2>
      <div ngbAccordionCollapse>
        <div ngbAccordionBody>
          <ng-template>
            @for (e of array; track e.id; let idx = $index) {
              <div>{{e.id}} - {{e.name}}</div>
            }
            <button (click)="foo()">foo</button>
          </ng-template>
        </div>
      </div>
    </div>
  }
</div>

home.ts

array2 = [
  { id: 1, name: 'bill' },
  { id: 2, name: 'bob' },
  { id: 3, name: 'billy' },
];
array = [
  { id: 1, name: 'bill' },
  { id: 2, name: 'bob' },
  { id: 3, name: 'billy' },
];

foo() {
  // 可选：若push操作仍有问题，用不可变更新强制触发变更检测
  // this.array = [...this.array, { id: 4, name: '44444' }];
  this.array.push({ id: 4, name: '44444' });
}

额外排查点 #

如果上述修改后仍存在问题，可尝试：

• 确认ng-bootstrap版本与Angular 17兼容（建议使用最新稳定版）
• 若组件使用OnPush变更检测策略，需手动触发变更检测

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