Как открыть Nebular Accordion по умолчанию с помощью Ngfor - PullRequest
Новая
       15

Как открыть Nebular Accordion по умолчанию с помощью Ngfor

0 голосов
/ 08 марта 2019

Я использую последнюю версию Nebular с Angular 7, столкнувшись с проблемой при использовании небулярного аккордеона.Проблема: по умолчанию активный аккордеон должен расширяться не все, я пытался использовать расширенный = true, но с этим весь аккордеон расширяется, что не является вариантом использования. 

<nb-accordion>
    <nb-accordion-item *ngFor="let list of lists" expanded =true >
        <nb-accordion-item-header>
            {{list.name}}
        </nb-accordion-item-header>
        <nb-accordion-item-body >
            <ul >
                <li *ngFor="let item of list.category" [value]="item.id" 
                [ngClass]="{'active': item.id == categoryId}">
                    <div class="col-9">{{item.name}}</div>
                </li>
            </ul>
        </nb-accordion-item-body>
    </nb-accordion-item>
</nb-accordion>

1 Ответ

1 голос
/ 12 марта 2019

Если вам нужно развернуть конкретный элемент, вы можете переместить расширенный флаг внутри массива lists, например, так: 

  lists = [
    {
      name: 'Test',
      expanded: false,
    },
    {
      name: 'Test 2',
      expanded: true,
    },
  ];

, а затем использовать его как свойство expandedзначение: 

<nb-accordion>
    <nb-accordion-item *ngFor="let list of lists" [expanded]="list.expanded">
        <nb-accordion-item-header>
            {{list.name}}
        </nb-accordion-item-header>
        <nb-accordion-item-body >
            Hello
            World
        </nb-accordion-item-body>
    </nb-accordion-item>
</nb-accordion>

Вот, пожалуйста, https://stackblitz.com/edit/github-e99ybz?file=src/app/home/home.component.html

...