如何使用 Ngfor 默认打开 Nebular Accordion

Posted 2023-03-05

【中文标题】如何使用 Ngfor 默认打开 Nebular Accordion

【英文标题】：How to open Nebular Accordion by default with Ngfor

【发布时间】：2019-07-30 09:08:06

【问题描述】：

我正在使用带有 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>

【参考方案1】：

使用collapsedChange事件

 <nb-accordion-item
    (collapsedChange)="getChildModulesList($event,module._id)"
    
    #item *ngFor="let module of parentModuleList ">

【参考方案2】：

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

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();
            ); 
        );
        
  

解释

我将@ViewChildren 用于多个 DOM。 然后在ngAfterViewInit 调用这个 DOM Child 并直接调用 toggle()

注意：之后你需要调用detectChanges()方法，因为它不能自动检测变化。如果你不添加这一行，你会出现这个错误=>

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'collapsed': 'true'. Current value: 'false'.

【参考方案3】：

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