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

Question

我在 for 循环中使用 ngb-accordion。它正在工作，但似乎无法在 for 循环中打开活动元素。

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

当我在<ngb-accordion></ngb-accordion> 之外定义 *ngFor 时，它可以工作，因为我可以将索引链接到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