手风琴主体动态内容无法正常工作 - Angular + ngbAccordion

Question

我有一个手风琴，它循环遍历数组，并根据条件动态加载手风琴体内的内容。

items = [
{
data: 'test1',
item: []
},{
data: 'test2',
item: []
},{
data: 'test3',
item: []
},
]

<div ngbAccordion *ngFor="let i of items">
  <div
    ngbAccordionItem
    #item="ngbAccordionItem"
    [collapsed]="false"
    class="item"
  >
    <div ngbAccordionHeader ngbAccordionToggle>{{ i.data }}</div>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <div *ngIf="i.data === 'test1'">1</div>
        <div *ngIf="i.data === 'test2'">2</div>
        <div *ngIf="i.data === 'test3'">3</div>
      </div>
    </div>
  </div>
</div>

问题是当手风琴主体加载时，它总是在匹配正确的条件后加载第一个元素。

这就是我的结果：

当前结果：

________
|test2 |
________
| 2    |
| 1    |
--------

预期结果：

________
|test2 |
________
| 2    |
--------

有人可以让我知道我在这里做错了什么吗？ 我尝试使用

ngSwitch

并得到了相同的结果。

Answer 1

根据 NgbAccordionBody 指令 API 文档 和 usage，您应该在

<ng-template>

元素中提供内容。

实际内容在子 ng-template 元素中提供。根据手风琴的状态，模板将被插入 DOM 或从 DOM 中删除。

<div ngbAccordionBody>
  <ng-template>
    <div *ngIf="i.data === 'test1'">1</div>
    <div *ngIf="i.data === 'test2'">2</div>
    <div *ngIf="i.data === 'test3'">3</div>
  </ng-template>
</div>

演示@StackBlitz