Angular 如何使用Ngfor默认打开星云手风琴

我正在使用最新的星云版本Angular 7，在使用星云手风琴时遇到了一个问题。 问题：默认情况下，活动accordion不应全部展开，我尝试使用expanded=true，但使用此all accordion expanded，这不是用例

<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>

{{list.name}


{{item.name}

如果需要扩展某个特定元素，可以在

列表

数组中移动扩展标志，如下所示：

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

然后将其用作扩展的属性值：

<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>

{{list.name}
你好
世界

给你

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

HTML

解释

我对多个DOM使用了

@ViewChildren

在

ngAfterViewInit

处调用这个DOM子对象，只需调用

切换（

）

注意：在此之后，您需要调用

detectChanges（）

方法，因为它无法自动检测更改。如果不添加此行，您将出现此错误=>

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

@ViewChildren('item') accordion;

  constructor(private cdr: ChangeDetectorRef) { }

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

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