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

Question

我尝试了所有方法，但无法得到想要的答案。 如何使整行可单击以及单击复选框时如何更改行颜色？

这是我尝试过的 html 文件

<section class="others" >
<div class="sub-header">Others</div>
<p class="text-center" *ngIf="otherTests.length === 0">No Tests Available</p>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests let i = index;" id="{{testPanel.Id}}" [title]="testPanel.Name">
  <ng-template ngbPanelTitle>
    <div class="action-items" [ngStyle]="{'background-color': i.checked == true? '#00B7A8' : 'white'}">
      <span class="material-icons fav" [ngStyle]="{'background-color': i.checked == true? '#00B7A8' : 'white'}" [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 #i
            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>
  </app-custom-accordion>
 </section>

我从中得到了什么

这是我用于更改复选框的 Ts 文件

onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
this.checked = $event
let testPanelIds = panel.Tests.map(test => test.Id);
// Wipe any duplicates
this.panelIds = this.panelIds.filter(
  panelId => panel.Id !== panelId && testPanelIds.indexOf(panelId) === -1
);
this.selectedPanels = this.selectedPanels.filter(
  selectedPanel =>
    panel.Id !== selectedPanel.Id &&
    testPanelIds.indexOf(selectedPanel.Id) === -1
);

if ($event) {
  this.panelIds.push(panel.Id);
  this.selectedPanels.push(panel);
   }
  this.updateSession();
}

这是我的 app-custom-accordion 组件

 <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>
    </ng-template>
  </div>

单击复选框时如何更改整行的颜色 就像当复选框被选中时，整行应该是黑暗的或其他什么，当未选中时应该去以前的颜色，即白色 谁能帮忙？谢谢

Answer 1

<div class="action-items" [ngStyle]="{'background-color': i.checked == true? '#00B7A8' : 'white'}">

i 是由以下定义的索引号：

<ngb-panel ... *ngFor="let testPanel of otherTests let i = index;" ...>

所以i.checked 是未定义的，使得i.checked == true 始终为假。

您还没有显示 testPanel 或 otherTests 是什么，但我认为您想要的代码更像：

[ngStyle]="{'background-color': testPanel.checked? '#00B7A8' : 'white'}"

如果这不是您的问题，请提供一个显示问题的有效 stackblitz 示例，或至少分享您的实际所有 相关代码。