将手风琴作为复选框

Question

在我的 angular 应用程序中，我正在使用 bootstrap 手风琴。

但我希望手风琴充当复选框，如果选中该复选框，手风琴应该展开并被选中。

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

代码如下：

 <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

这可能不是最漂亮的解决方案，但为了完成这项工作，我将复选框添加到 header 并监听了每个复选框的 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

编辑：

要打开面板，您最初使用输入属性 activeIds (apidocs)

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

...

public initialIds = ['toggle-3'];

将手风琴作为复选框

to make accordion as a checkbox

html

checkbox

accordion

bootstrap-4

angular