Question

你好几天都在搜索，但找不到任何东西。我有一个有三个手风琴组的手风琴，我已经添加了一个按钮来打开下一个手风琴，但似乎无法使其正常工作。请有人帮忙。这是我到目前为止所拥有的

<accordion [closeOthers]="true" style="margin-top:5px;">
        <accordion-group *ngFor="let registration of registrationArray; let i = index" #groupval style="margin-top:5px;" [isOpen]="registration.isAccordionOpen">
          <div accordion-heading style="width:100%;">
            Registrant No. {{i + 1}}
            <i class="pull-right float-xs-right glyphicon"
               [ngClass]="{'glyphicon-chevron-down': groupval?.isOpen, 'glyphicon-chevron-up': !groupval?.isOpen}"></i>
          </div>
          <form [formGroup]="myGroup" (ngSubmit)="gotoAddons(myDetails)">
            <div formArrayName="myDetails">
              <div class="panel-body" [formGroupName]="i">
                <div style="padding-top:20px;clear:both;">
                  <div style="width:100%;background-color:#578ebe;border: 1px solid #7ca7cc;">
                    Your Address
                  </div>
                  <div style="padding-top:30px;clear:both;">
                    <div style="width:100%">
                      <div style="float:left;width:30%;text-align:right;">
                        <span class="required">*</span><label>Address Line 1</label>
                      </div>
                      <div style="float:left;width:70%;padding-left:10px;">
                        <input autofocus class="form-control" type="text" id="address" name="address" formControlName="address" required>
                        <div *ngIf="myGroup.controls.myDetails.controls[i].controls.address.errors && (myGroup.controls.myDetails.controls[i].controls.address.dirty || myGroup.controls.myDetails.controls[i].controls.address.touched || submitted)" class="alert alert-danger">
                          <div [hidden]="!myGroup.controls.myDetails.controls[i].controls.address.errors.required">
                            Address Line 1 is required!
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>                
                <div style="width:100%;" *ngIf="i < registrationArray.length - 1">
                  <div style="float:right;">
                    <button (click)="groupval.isOpen = !groupval.isOpen" class="btn green">Open next tab</button>
                  </div>
                </div>
                <div style="width:100%;"  *ngIf="i == registrationArray.length - 1" >
                  <div style="float:right;">
                    <button type="submit" class="btn green">Continue</button>
                  </div>
                </div>
               </div>
            </div>
          </form>
        </accordion-group>
      </accordion>

删除了一些代码以便澄清。有人可以告诉我如何在按钮点击上打开下一个手风琴组。提前致谢

这是一个工作示例

plunkr

stackblitz链接

stackblitz

Answer 1

在你的情况下，我看到你实际上只是关闭了已打开的面板，而这就是全部。除此之外，您需要打开下一个面板，可以通过将其isOpen属性设置为true来完成。一个带有测试实现的小傻瓜 - https://stackblitz.com/edit/ngx-bootstrap-ifmpph?file=app/app.component.html

按下按钮后，手风琴打开

1 个答案: