簡體   English   中英

如何使整行可點擊並更改顏色角度4

[英]how to make the whole row clickable and change the color angular 4

我如何使整個行都可單擊,以及當我單擊復選框時如何更改行顏色?

這是我的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" 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>

這是我的復選框更改的Ts文件

onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
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();
}

這是我的應用程序自定義手風琴組件

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

如何在單擊復選框時更改整個行的顏色,例如當選中復選框時,整個行應為深色或其他顏色,未選中時應恢復為先前的顏色,即白色可以幫助任何人嗎? 謝謝

您可以使用(click)使整個行可點擊:

例:

<div (click)="someFunction()"></div>

使div可點擊

要基於復選框的值更改顏色,可以啟用和禁用將顏色應用於元素的類,如下所示:

<div [className]="valueOfCheckBox? 'example-class' : 'other-class'"></div>

在上面的代碼中, valueOfCheckBox將是您的check-box的值, example-class可以是選中時帶有顏色的classother-class可以是帶有未選中時顯示顏色的class

您也可以使用如下所示的style進行相同操作:

<div [style.color]="valueOfCheckBox ? 'blue' : 'green'"></div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM