[英]How to highlight only one expansion panel onclick and reset if choose other
Firstly, I am very new to Angular world. 首先,我对Angular世界很新。 Trying to achieve a task.
试图完成一项任务。 I really appreciate all inputs.
我非常感谢所有的投入。 Coming to the issue.
来到这个问题。
I am creating multiple expansion panel using a "ngFor". 我正在使用“ngFor”创建多个扩展面板。 I want to highlight or change style sheet for only the panel that user selected.
我想仅为用户选择的面板突出显示或更改样式表。 Rest all panels should have default style sheet.
休息所有面板应该有默认样式表。 when user clicks the second panel then it should highlight second panel and reset the first panel to default.
当用户单击第二个面板时,它应突出显示第二个面板并将第一个面板重置为默认值。
"ngFor loop" is one component and it interacting with "mat expansion panel" in another component. “ngFor loop”是一个组件,它与另一个组件中的“mat expansion panel”进行交互。 So, I am finding difficulty to reset the previous highlighted panel when user clicks the other panel.
因此,当用户单击其他面板时,我发现很难重置上一个突出显示的面板。
I used "css style - focus" it worked as charm. 我用“css风格 - 焦点”它作为魅力。 But the problem is, even if I click anywhere on the screen the css style sets to default.
但问题是,即使我点击屏幕上的任何地方,css样式设置为默认值。 I want only when user selects other panel then it should reset.
我想只有当用户选择其他面板然后它应该重置。
I also tried finding previous element and current element and compare them based on that try to change the style. 我也尝试找到前面的元素和当前元素,并根据它尝试更改样式进行比较。 It is working but I am not able to reset if user select second panel.
它正在工作,但如果用户选择第二个面板我无法重置。 Both are getting highlighted.
两者都得到了强调。
This is first component HTML : 这是第一个组件HTML:
</div>
<app-cpd-pres-deck-view *ngFor="let pres of allPres; let idx = index;" [pres]="pres" [isExpanded]= "idx==0" ></app-cpd-pres-deck-view>
</div>
This is mat expansion panel component html : 这是mat扩展面板组件html:
<mat-expansion-panel [expanded]="isExpanded" hideToggle="true" style="margin: 5px;" class="prestest" [(expanded)]="expanded">
<!-- <mat-expansion-panel [expanded]="false" (click)="clickIcon()" hideToggle="true" style="margin: 5px;" class="prestest" > -->
<mat-expansion-panel-header (click)="openPresDeck()" [collapsedHeight]="'60px'" [expandedHeight]="'60px'">
<mat-panel-title>
<mat-icon class="arrow">{{expanded ? 'arrow_drop_down' : 'arrow_right' }}</mat-icon>
<div class="col-md-9" >
<label class="name" id="lblName" >{{pres.profileName}}</label>
<!-- <label class="name" id="lblName" >{{pres.profileName}}</label> -->
</div>...
some more content
</mat-panel-description>
</mat-expansion-panel>
When page is loaded, it loads all panels with default style sheet. 加载页面时,它会使用默认样式表加载所有面板。 Now when use select any panel it should highlight that panel and reset if user select another panel.
现在,当使用选择任何面板时,它应突出显示该面板并在用户选择另一个面板时重置。
There's a class in mat-expansion called 'mat-expanded', when this class is added to the selected tab. 在将此类添加到所选选项卡时,mat-expansion中有一个名为“mat-expanded”的类。 For example:
例如:
.mat-expanded {
background: #f5f5f5;
}
When user click another panel, this class is added to another panel. 当用户单击另一个面板时,此类将添加到另一个面板。
You can control the highlight based on that class. 您可以根据该类控制突出显示。
welcome to SO and Angular. 欢迎来到SO和Angular。
i think you came very close when you tried this; 我觉得你在尝试时非常接近;
I also tried finding previous element and current element and compare them based on that try to change the style.
我也尝试找到前面的元素和当前元素,并根据它尝试更改样式进行比较。 It is working but I am not able to reset if user select second panel.
它正在工作,但如果用户选择第二个面板我无法重置。 Both are getting highlighted.
两者都得到了强调。
what you should have done is that instead of finding previous element; 你应该做的是,而不是找到以前的元素;
export class AppCpdPresDeckViewComponent implements OnInit {
isSelected = false;
}
export class FirstComponent implements OnInit {
@ViewChildren(AppCpdPresDeckViewComponent) panels: QueryList<AppCpdPresDeckViewComponent>;
}
selectPanel(selectedPanel: AppCpdPresDeckViewComponent) {
this.panels.forEach(p => p.isSelected = false);
selectedPanel.isSelected = true;
}
in first.component.html 在first.component.html中
<app-app-cpd-pres-deck-view #acdw *ngFor="let pres of allPres" [pres]="pres" (click)="selectPanel(acdw)"></app-app-cpd-pres-deck-view>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.