Question

嘿，我有这个面板，它由名称和复选框组成我要的是选中此复选框时，每个面板的背景色应更改，并应在选中此复选框时保持在该位置。我什至尝试了ngClass，但是它会改变颜色，但是当我回到面板上时，颜色又回到了白色

我该怎么做？

我的父母html

<section class="others">
<div class="sub-header">Others</div>
<p class="text-center">{{testText}}</p>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests" id="{{testPanel.Id}}" [title]="testPanel.Name">
  <ng-template ngbPanelTitle>
    <div class="action-items">
      <span class="material-icons fav" [class.favorited]="testPanel.Favorite"
            (click)="onFavoriteClick(testPanel)"></span>
      <span class="icon-set"
            [ngClass]="{'same-day-2x': isSameDay(testPanel.Code), 'next-day-2x': isNextDay(testPanel.Code)}"></span>
      <label class="custom-control custom-checkbox">
        <input
          type="checkbox"
          class="custom-control-input"
          [name]="testPanel.Id + '-' + testPanel.Moniker"
          [ngModel]="panelIds.indexOf(testPanel.Id) > -1"
          (ngModelChange)="onPanelCheckboxUpdate($event, testPanel)"
          [id]="testPanel.Id + '-' + testPanel.Moniker">
        <span class="custom-control-indicator"></span>
      </label>
    </div>
  </ng-template>
</ngb-panel>

子组件应用自定义手风琴

<div class="card">
<ng-template ngFor let-panel [ngForOf]="panels">
<div role="tab" id="{{panel.id}}-header" [class]="'card-header ' + (panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')"
  [class.active]="isOpen(panel.id)">
  <a href (click)="!!toggle(panel.id)" [attr.tabindex]="(panel.disabled ? '-1' : null)" [attr.aria-expanded]="isOpen(panel.id)"
    [attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)" [attr.aria-disabled]="panel.disabled">{{panel.title}}</a>
  <ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
  <!-- expansion arrows -->
  <div *ngIf="arrowExpand" (click)="toggle(panel.id)" [attr.aria-expanded]="isOpen(panel.id)">
    <span class="material-icons expand"></span>
  </div>

</div>
<div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id) && panel.contentTpl">
  <ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"></ng-template>
</div>

我尝试了ngClass。暂时它会更改颜色，但我回来后颜色又恢复为默认的白色。有人可以帮忙吗？谢谢

选中复选框4角时如何更改面板的颜色

0 个答案: