使手风琴成为复选框

Question

​

在我的角度应用中，我使用的是自举手风琴。

但我希望手风琴作为一个复选框，如果复选框被选中，手风琴应该展开和选择。

但我做不到。我什么都试过了。

以下是代码：

 <div class="card">
      <div class="card-body">
        <h4 class="card-title">Solid header accordion</h4>
        <p class="card-description">Use class <code>.accordion-solid-header</code> for basic accordion</p>
        <div class="mt-4">
          <ngb-accordion [closeOthers]="true" activeIds="collapse-12" class="accordion-solid-header">
            <ngb-panel id="collapse-10" title="How can I pay for an order I placed?">
 <input type="checkbox" class="col-lg-3 pull-right" id="16" value="{{i.challengeId}}"
            name="challenge" formControlName="challenge" (change)="handleSelected(i)" />
              <ng-template ngbPanelContent>
                <div class="row">
                  <div class="col-3">
                    <img src="assets/images/samples/300x300/10.jpg" class="mw-100"/>                              
                  </div>
                  <div class="col-9">
                    You can pay for the product you have purchased using credit cards, debit cards, or via online banking. 
                    We also provide cash-on-delivery services.                             
                  </div>
                </div>
              </ng-template>
            </ngb-panel>
            <ngb-panel id="collapse-11" title="I can’t sign in to my account">
 <input type="checkbox" class="col-lg-3 pull-right" id="16" value="{{i.challengeId}}"
            name="challenge" formControlName="challenge" (change)="handleSelected(i)" />
              <ng-template ngbPanelContent>
                If while signing in to your account you see an error message, you can do the following
                <ol class="pl-3 mt-4">
                  <li>Check your network connection and try again</li>
                  <li>Make sure your account credentials are correct while signing in</li>
                  <li>Check whether your account is accessible in your region</li>
                </ol>
                <br>
                <p class="text-success">
                  <i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
                </p>
              </ng-template>
            </ngb-panel>
            <ngb-panel id="collapse-12" title="Can I add money to the wallet?">
 <input type="checkbox" class="col-lg-3 pull-right" id="16" value="{{i.challengeId}}"
            name="challenge" formControlName="challenge" (change)="handleSelected(i)" />
              <ng-template ngbPanelContent>
                  You can add money to the wallet for any future transaction from your bank account using net-banking, or credit/debit card transaction. The money in the wallet can be used for an easier and faster transaction.                
              </ng-template>
            </ngb-panel>
          </ngb-accordion>          
        </div>
      </div>
    </div>

Answer 1

这可能不是最漂亮的解决方案，但为了完成这项工作，我将复选框添加到标题中，并从每个复选框中听取ngModelChange事件，基本上如下：

<input
      class="form-check-input"
      type="checkbox"
      [ngModel]="checked1"
      (ngModelChange)="modelChanged(0, $event, acc)"
      id="check1"
    />

我重置模型并为每个输入设置

public modelChanged(pos, event, acc) {
  this.checked = [false, false, false];
  this.checked[pos] = event;
  event ? acc.expand(`toggle-${pos + 1}`) : acc.collapse(`toggle-${pos + 1}`);
}

我创建了这个stackblitz以显示它是有效的：https://stackblitz.com/edit/angular-spgmuk?file=src%2Fapp%2Faccordion-static.html

编辑：

要打开面板，首先要使用input属性activeIds (尖点)

<ngb-accordion #acc="ngbAccordion" [activeIds]="initialIds" [closeOthers]="true">

...

public initialIds = ['toggle-3'];