0

首先，我对 Angular 世界很陌生。试图完成一项任务。我真的很感激所有的投入。来到这个问题。

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

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

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

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

4

2 回答 2

1

当这个类被添加到选定的选项卡时，mat-expansion 中有一个名为“mat-expanded”的类。例如：

.mat-expanded {
  background: #f5f5f5;
}

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

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

于 2019-06-24T17:20:20.120 回答
0

欢迎来到 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>

这是一个工作演示

于 2019-06-24T17:35:38.480 回答