即使关闭，组件也会在 ng bootstrap 手风琴内初始化

Question

我在使用 ng bootstrap 的手风琴及其内部组件时遇到问题。 我有一个

*ngFor

，对于每个索引数组，都有一个包含组件的手风琴。 问题是，即使手风琴在 DOM 渲染时也关闭了手风琴内的所有组件，开始它们的生命周期，导致每个手风琴内的每个组件都被 https 调用。 默认情况下，我将手风琴属性

destroyOnHide

（ngbAccordion 的属性）设置为 true，但没有设置。

有人遇到这个问题吗？

下面的 HTML 代码组件 设置选项卡.component.html

div
  class="mt-2"
  #accordion="ngbAccordion"
  ngbAccordion
  [closeOthers]="true"
  (shown)="lastAccordionOpened = $event"
>
  <div
    ngbAccordionItem
    *ngFor="let room of rooms; let index = index"
    [ngbAccordionItem]="index.toString()"
  >
    <div ngbAccordionHeader>
      <button
        ngbAccordionButton
        [style.backgroundColor]="room.bgColorHex"
        [style.color]="room.textColorHex"
      >
        {{ room.name }}
      </button>
    </div>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <app-room-settings
          [room]="room"
          (roomChanged)="roomChanged.emit()"
        ></app-room-settings>
      </div>
    </div>
  </div>
</div>

HTTP 调用是在内部进行的，如果我在构造函数内设置 console.log，则 console.log 的数量与房间数组的长度一样多

Answer 1

首先将

destroyOnHide

设置为

false

，这样组件就被销毁了。

然后你需要添加

trackBy

，以便

ngFor

知道哪些元素发生了变化，如果没有，它将重新渲染所有组件。

<div
  class="mt-2"
  [destroyOnHide]="false"
  #accordion="ngbAccordion"
  ngbAccordion
  [closeOthers]="true"
  (shown)="lastAccordionOpened = $event"
>
  <div
    ngbAccordionItem
    *ngFor="let room of rooms; trackBy: trackByFn;let index = index"
    [ngbAccordionItem]="index.toString()"
  >
    <div ngbAccordionHeader>
      <button
        ngbAccordionButton
        [style.backgroundColor]="room.bgColorHex"
        [style.color]="room.textColorHex"
      >
        {{ room.name }}
      </button>
    </div>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <app-room-settings
          [room]="room"
          (roomChanged)="roomChanged.emit()"
        ></app-room-settings>
      </div>
    </div>
  </div>
</div>

TS：

...
identify(index: number, item: any){
   return item.name; 
}
...