单击按钮时 ngx-bootstrap-accordion hide/show
ngx-bootstrap-accordion hide/show when button is clicked
我有动画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>
自从您在模板上改变可见 属性 后,对象的引用没有发生变化,因此不会触发手风琴组件变化检测。
试试这个:
component.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
}
}
我有动画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>
自从您在模板上改变可见 属性 后,对象的引用没有发生变化,因此不会触发手风琴组件变化检测。
试试这个:
component.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
}
}