如何在 ngFor 循环中使用 ngb-accordion？

Question

我在 for 循环中使用 ngb-accordion。它对一部分有效，但似乎无法在 for 循环中打开活动元素。

我想让当其中一个手风琴元素包含属性 'OpenAccordion' 时，该元素的面板打开成为可能。所以我需要为数组中的每个元素定义 activeIds 和 id 以使其成为可能。

当我在 <ngb-accordion></ngb-accordion> 之外定义 *ngFor 时它起作用了，因为我可以 link activeIds 和 id 的索引。但是他的时间不可能一次打开一个面板，因为面板是分开的。

[closeOthers] 正在处理这个，但 open one panel at a time 不工作：

<ngb-accordion  
    class="accordion-item" 
    [closeOthers]="true"  
    activeIds="true-{{i}}">

    <div *ngFor="let child of items?.children | async; let i = index">
        <ngb-panel id="{{(child?.value?.properties | async)?.property.includes('OpenAccordion')}}-{{i}}">
            <ng-template ngbPanelHeader let-opened="opened">
                <div class="d-flex align-items-center justify-content-between">
                    <button ngbPanelToggle class="btn btn-link container-fluid text-left">
                        <h5>
                            {{ (child?.value?.properties | async)?.title }}
                        </h5>
                    </button>
                </div>
            </ng-template>
            <ng-template ngbPanelContent>
                <h4>test</h4>
            </ng-template>
        </ngb-panel>
    </div>

</ngb-accordion>

当我在 <ngb-accordion></ngb-accordion> 中定义 *ngFor 时，[closeOthers] 功能有效，但这次无法打开活动的手风琴面板。因为activeId的index是未知的，与active元素的id不匹配。

Open one panel at a time 正在工作，但 [closeOthers] 没有在这个上工作：

<ng-template ngFor let-child [ngForOf]="items?.children | async" let-i="index">
    <ngb-accordion  
        class="accordion-item" 
        [closeOthers]="true"  
        activeIds="true-{{i}}">

        <ngb-panel id="{{(child?.value?.properties | async)?.property.includes('OpenAccordion')}}-{{i}}">
            <ng-template ngbPanelHeader let-opened="opened">
                <div class="d-flex align-items-center justify-content-between">
                    <button ngbPanelToggle class="btn btn-link container-fluid text-left">
                        <h5>
                            {{ (child?.value?.properties | async)?.title }}
                        </h5>
                    </button>
                </div>
            </ng-template>
            <ng-template ngbPanelContent>
                <h4>test</h4>
            </ng-template>
        </ngb-panel>
    </ngb-accordion>
</ng-template>

如何才能让函数 [closeOthers] 和 open one panel at a time 在 *ngFor 循环中工作？

Answer 1

在你的第一个解决方案中，有一个错误，你在声明之前使用了变量 i:

<ngb-accordion  
class="accordion-item" 
[closeOthers]="true"  
activeIds="true-{{i}}"> // i used before declaration?

<div *ngFor="let child of items?.children | async; let i = index">

我刚刚创建了一个将 ngFor 与 ngb-accordion 结合使用的简单示例，效果很好。

你应该尝试在 <ngb-accordion>:

中使用 ngFor

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-accordion-static',
  templateUrl: './accordion-static.html'
})
export class NgbdAccordionStatic {

  accordionSamples = [
    {
      id: 1,
      title: 'Simple',
      content: `Simple content sample`
    },
    {
      id: 2,
      title: 'Fancy',
      content: `Fancy content interesting`
    }
    ]

}

HTML:

<ngb-accordion [closeOthers]="true" activeIds="acc-2">
  <ngb-panel *ngFor="let acc of accordionSamples" id="acc-{{acc.id}}" title="{{acc.title}}">
    <ng-template ngbPanelContent>
      {{acc.content}}
    </ng-template>
  </ngb-panel>
</ngb-accordion>

https://stackblitz.com/edit/angular-mdbedd?file=src%2Fapp%2Faccordion-static.html

如何在 ngFor 循环中使用 ngb-accordion？

How to use ngb-accordion in a ngFor loop?

javascript

angular

accordion

ng-bootstrap