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

Question

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

javascriptangularaccordionng-bootstrap

3

我正在使用ngb-accordion来进行循环。它在某些方面运行良好，但似乎无法在循环中打开活动元素。

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

当我将*ngFor定义在<ngb-accordion></ngb-accordion>之外时，它可以工作，因为我可以将索引链接到activeIds和id。但这次它不可能一次只打开一个面板，因为面板是单独的。

[closeOthers] 可用于关闭其他选项，但一次只能打开一个面板不能正常工作：

<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]功能起作用，但这时无法打开活动手风琴面板，因为活动Id的索引未知且不匹配活动元素的id。 一次只打开一个面板可以运作，但这个并不起作用：[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>

如何在 *ngFor 循环中实现 [closeOthers] 和 一次只打开一个面板 两个功能同时工作？

- Can

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- huan feng · Accepted Answer

在你的第一个解决方案中，存在一个错误，你在变量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