Question

首先，我是Angular世界的新手。试图完成一项任务。我非常感谢所有意见。来解决这个问题。

我正在使用“ ngFor”创建多个扩展面板。我只想突出显示或更改用户选择的面板的样式表。其余所有面板应具有默认样式表。当用户单击第二个面板时，应突出显示第二个面板并将第一个面板重置为默认面板。

“ ngFor循环”是一个组件，它与另一组件中的“ mat扩展面板”交互。因此，当用户单击另一个面板时，我很难重置以前突出显示的面板。

我使用了“ css样式-焦点”作为魅力。但是问题是，即使我单击屏幕上的任意位置，css样式也会设置为默认样式。我只希望当用户选择其他面板时才应该重置。

我还尝试查找先前的元素和当前的元素，并根据尝试更改样式的方式对它们进行比较。它正在工作，但是如果用户选择第二个面板，则无法重置。两者都被突出显示。

这是第一个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>

这是垫子扩展面板组件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>

加载页面时，它将加载具有默认样式表的所有面板。现在，使用任何面板时，它都应突出显示该面板，如果用户选择另一个面板，则应重置。

Answer 1

将此类添加到所选标签后，该类会在扩展垫中称为“ mat-expanded”。例如：

.mat-expanded {
  background: #f5f5f5;
}

当用户单击另一个面板时，此类将添加到另一个面板中。

您可以基于该类控制突出显示。

Answer 2

欢迎使用SO和Angular。

我认为您尝试此操作时非常接近；

我也尝试过查找先前的元素和当前的元素并进行比较他们基于此尝试更改样式。它正在工作，但我没有如果用户选择第二个面板，则可以重置。两者都越来越突出显示。

您应该做的是，而不是查找先前的元素；

在每个元素上跟踪所选状态（最初为false）

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;
  }

在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>

这是工作中的demo

如何仅在单击时突出显示一个扩展面板并在选择其他选项时将其重置

2 个答案: