accordion - 当另一个手风琴在 angular11 和 nebular 中打开时如何关闭一个手风琴

Question

嘿伙计们，当另一个手风琴打开时，我试图关闭一个手风琴，我点击第一个手风琴，手风琴打开，如果我点击第二个手风琴，第二个手风琴也打开。我的问题是：如何确保当我打开第一个手风琴时，其他手风琴会再次关闭？

代码

 <div class="d-flex flex-row">
              <nb-accordion style="width: 500px;" (click)="getListaMateriales(item.ItemCode)">
                <nb-accordion-item>
                  <nb-accordion-item-header>
                    <div class="d-flex align-items-center">
                      <h4 class="mb-0 text-center text-hint" style="width: 2rem;">{{letra(i)}}</h4>
                    </div>
        
                    <div class="flex-grow-1" style="min-height: 45px;">
                      <div class="d-block">
                        <label class="font-weight-bold mb-0">{{item.ItemName}}</label>
                      </div>
                      <span class="text-hint text-sm">{{item.ItemCode}}</span>
        
                      <div class="form-row">
                        <ng-container *ngFor="let mat of item.listaMateriales">
                          <ng-container *ngIf="mat.activo == false">
                            <div class="col-6 pr-2 text-sm">
                              <i class="fas fa-minus-square text-danger"></i>
                              SIN {{mat.ItemName}}
                            </div>
                          </ng-container>
                        </ng-container>
                      </div>
                    </div>
        
                      <div class="d-flex align-items-center mx-2">
                        <div>
                          <h5 class="mb-0 text-center text-info" *ngIf="item.articuloBaseMenuCod != null">
                            {{(item.detalleOportunidad.Quantity * item.articuloBaseMenu.baseMenu.cantidad)}}
                          </h5>
                          <h5 class="mb-0 text-center text-info" *ngIf="item.articuloBaseMenuCod == null">
                            {{item.detalleOportunidad.Quantity}}
                          </h5>
                          <span class="text-hint text-sm">Cantidad</span>
                        </div>
                      </div>
      
                      <div class="d-flex align-items-center mr-3 px-2">
                        <button type="button" nbButton status="primary" (click)="setPreparado(item.codArticuloDetalleOportunidad)" [disabled]="item.estadoProduccion">
                          <i class="fas fa-check"></i>
                        </button>
                      </div>
                  </nb-accordion-item-header>

                    <nb-accordion-item-body>
                      <ul>
                        <li *ngFor="let item of materialArticulo">
                          {{item.ItemName}}
                        </li>
                      </ul>
                    </nb-accordion-item-body>
                </nb-accordion-item>
              </nb-accordion>
            </div>

TS类

 getListaMateriales(cod: string): void {
    this.listadoMaterialesSvc.getList(cod).subscribe(res => {
      this.materialArticulo = res;
    }, error => {
      this.toastr.error(error);
    });
  }

标签： accordionangular11nebular