ボタンをクリックすると次のアコーディオンが開きます

Question

こんにちは数日前から検索していましたが、何も見つかりませんでした。私は3つのアコーデオングループを持つアコーディオンを持っています。私は次のアコーデオンを開くためのボタンを追加しましたが、それを働かせるように見えません。いくらか助けてもらえますか？ここに私がこれまで持っていたものがあります。

<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に設定することで、次のパネルを開く必要があります。 テスト実装で小型plunkr - https://stackblitz.com/edit/ngx-bootstrap-ifmpph?file=app/app.component.html