как изменить цвет панели, когда установлен флажок угловой 4 - PullRequest
Новая
       17

как изменить цвет панели, когда установлен флажок угловой 4

0 голосов
/ 05 апреля 2019

Эй, у меня есть эта панель, которая состоит из имени и флажка то, что я хочу, это когда флажок установлен, цвет фона каждой панели должен измениться и должен оставаться там, когда флажок установлен. Я попробовал все, даже 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. пока он меняет цвет, но я возвращаюсь, цвет возвращается к белому по умолчанию. Кто-нибудь может помочь? Спасибо

...