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

Question

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

我想让 Accordion 元素之一包含属性 '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]功能有效，但这次无法打开事件的 Accordion 面板。因为 activeId 的索引是未知的，与事件元素的 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