ngx- bootstrap - аккордеон скрыть / показать при нажатии кнопки

Question

У меня есть анимация ngx-bootstrap-accordion, но если я нажму достаточно быстро, ярлык не будет состоять из состояния accordion. Я хочу, чтобы на этикетке было указано hide, если есть что скрывать, а не когда содержимое видно.

Пример обновления: https://stackblitz.com/edit/ngx-bootstrap-accordion-asasasa2-zb5ki6

См. Блиц здесь: https://stackblitz.com/edit/ngx-bootstrap-accordion-asasasa2

app.component.ts

import { ViewChild } from '@angular/core';
import { AccordionPanelComponent } from 'ngx-bootstrap/accordion';
import {AfterViewInit, Component, Inject, OnInit} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {ViewportScroller} from '@angular/common';
import {Router} from '@angular/router';
import { StorageService, SESSION_STORAGE} from 'ngx-webstorage-service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  sections = [
    {
      code: 'a',
      visible: true,
      subsections: null
    },
    {
      code: 'p',
      visible: true,
      subsections: null
    }
  ];
}

app.component.html

<div class="toolbar">
    <h2>Toolbar</h2>
</div>

<div class="content">
    <accordion [isAnimated]="true">
        <accordion-group *ngFor="let subsection of sections" [isOpen]="subsection.visible" class="app-accordion-group">

            <div class="app-subsection-accordion-header" accordion-heading >

                <button *ngIf="subsection.visible"  (click)="subsection.visible = !subsection.visible">
               Open panel 2
             </button>

                <button *ngIf="!subsection.visible" (click)="subsection.visible = !subsection.visible">
              Hide panel 2
            </button>

                <div class="app-header-title">
                    text
                </div>
            </div>
            <div class="app-document app-desktopVisible">
                doc
            </div>
        </accordion-group>
    </accordion>
</div>

Answer 1

Поскольку вы изменяете видимое свойство в шаблоне, ссылка на объект не меняется, поэтому обнаружение изменения компонента аккордеона не запускается.

Попробуйте:

компонент. html

    <button *ngIf="subsection.visible"  (click)="toggle(i)">
           Open panel
     </button>

component.ts

toggle(index){
    this.sections[index] = {
      ... this.sections[index],visible: ! this.sections[index].visible
 }
}

Forked Example