如何使用 Ngfor 默认打开 Nebular Accordion答案

【问题标题】：How to open Nebular Accordion by default with Ngfor如何使用 Ngfor 默认打开 Nebular Accordion
【发布时间】：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>

【问题讨论】：

标签： angular html angular7 nebular

【解决方案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

【讨论】：