如何选择其他只突出显示一个扩展面板并重置

Question

首先，我对Angular世界很新。 试图完成一项任务。 我非常感谢所有的投入。 来到这个问题。

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

“ngFor loop”是一个组件，它与另一个组件中的“mat expansion panel”进行交互。 因此，当用户单击其他面板时，我发现很难重置上一个突出显示的面板。

我用“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>

这是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>

加载页面时，它会使用默认样式表加载所有面板。 现在，当使用选择任何面板时，它应突出显示该面板并在用户选择另一个面板时重置。

Answer 1

在将此类添加到所选选项卡时，mat-expansion中有一个名为“mat-expanded”的类。 例如：

.mat-expanded {
  background: #f5f5f5;
}

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

您可以根据该类控制突出显示。

Answer 2

欢迎来到SO和Angular。

我觉得你在尝试时非常接近;

我也尝试找到前面的元素和当前元素，并根据它尝试更改样式进行比较。 它正在工作，但如果用户选择第二个面板我无法重置。 两者都得到了强调。

你应该做的是，而不是找到以前的元素;

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

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>

这是一个工作演示