Angular 单击按钮时ngx引导手风琴隐藏/显示
我有动画ngx引导手风琴 但如果我点击的速度足够快,标签就和手风琴的状态不一致了。我希望标签在有东西要隐藏时显示隐藏,而不是在内容可见时显示隐藏 更新示例: 请参见此处的闪电战: app.component.ts app.component.htmlAngular 单击按钮时ngx引导手风琴隐藏/显示,angular,typescript,angular8,ngx-bootstrap,Angular,Typescript,Angular8,Ngx Bootstrap,我有动画ngx引导手风琴 但如果我点击的速度足够快,标签就和手风琴的状态不一致了。我希望标签在有东西要隐藏时显示隐藏,而不是在内容可见时显示隐藏 更新示例: 请参见此处的闪电战: app.component.ts app.component.html 由于在模板上改变可见属性,对象的引用不会改变,因此不会触发手风琴组件更改检测 试试这个: component.html 仅仅将代码添加到component.ts并不能解决这个问题-请参见blitz中的。html中的代码是相同的。我想让它说,如果有
由于在模板上改变可见属性,对象的引用不会改变,因此不会触发手风琴组件更改检测 试试这个: component.html
仅仅将代码添加到component.ts并不能解决这个问题-请参见blitz中的。html中的代码是相同的。我想让它说,如果有隐藏的内容,打开面板,如果有可见的内容,隐藏面板。示例中的内容是doc。尝试在blitz中快速单击隐藏/显示面板按钮。我可以让它说隐藏面板时,文件字是隐藏的。也许这个例子是不完美的,请注意,我们是在html的小节,而不是节操作。我们想隐藏/显示子部分。文档文本可以是来自小节的文本,并且不应为空。我将更新它。我添加了更新的示例,我想对子部分进行操作,我想禁用默认的手风琴行为,在单击结束时隐藏/显示内容,我只想在单击按钮时隐藏/显示内容。对不起,前面的例子不准确。我希望从一开始就可以看到各个部分,但在鼠标点击按钮后,子部分应该是可见的。这里剩下的问题是:当点击手风琴时,它应该只对按钮作出反应,以防止手风琴自身的行为。这是一个小问题,但只有在blitz中,由于错误错误[ExpressionChangedTerithasBeenCheckedError:Expression在被选中后发生了更改,所以这些部分对[isOpen]=true的响应不正确。上一个值:“面板打开:true”。当前值:“panel open:false”您的意思是默认情况下所有部分都应可见?
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
}
];
}
<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>
<button *ngIf="subsection.visible" (click)="toggle(i)">
Open panel
</button>
toggle(index){
this.sections[index] = {
... this.sections[index],visible: ! this.sections[index].visible
}
}