2

我正在使用带有 Angular 7 的最新 Nebular 版本，在使用 nebular 手风琴时遇到问题。问题：默认情况下，活动手风琴不应该全部展开，我尝试使用 expand = 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>
4

3 回答 3

4

如果您需要扩展特定元素，可以将扩展标志移动到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

于 2019-03-12T14:01:12.050 回答
0

使用 collapsedChange 事件

 <nb-accordion-item
    (collapsedChange)="getChildModulesList($event,module._id)"
    
    #item *ngFor="let module of parentModuleList ">
于 2021-06-19T20:10:56.983 回答
0

根据文档，你可以这样使用 =>

HTML

<nb-accordion *ngFor="let level of datalist" multi>
   <nb-accordion-item #item>
       <nb-accordion-item-header>header</nb-accordion-item-header>
       <nb-accordion-item-body>body</nb-accordion-item-body>
   </nb-accordion-item>
</nb-accordion>

零件

@ViewChildren('item') accordion;

  constructor(private cdr: ChangeDetectorRef) { }

  ngAfterViewInit(): void {    
   
      this.accordion.changes.subscribe(ac =>
        {
          ac.toArray().forEach(el => {     
              el.toggle();
              this.cdr.detectChanges();
            }); 
        });
        
  }

解释

  1. 我用于@ViewChildren多个 DOM。
  2. 并调用这个 DOM ChildngAfterViewInit并调用toggle(）

注意：之后您需要调用detectChanges()方法，因为它无法自动检测更改。如果您不添加此行，您将出现此错误=>

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'collapsed': 'true'. Current value: 'false'.
于 2020-10-26T09:31:43.633 回答