Блог

В моем коде у меня есть длинный список элементов и кнопка для боковой панели. Поскольку список слишком длинный, я хочу запомнить, где я нажал. Для этого я хочу, чтобы цвет строки менялся при нажатии кнопки. Вот что я сделал до сих пор. Мне удалось изменить только цвет всей таблицы (строка пула). Что я должен сделать, чтобы изменить цвет только выбранной строки?

HTML:

 lt;div fxLayout="column" fxLayoutAlign="end" class="mat-elevation-z4 responsive-grid"gt;  lt;div fxLayout="row" fxLayoutAlign="end" class="pr-4"gt;  lt;mat-form-field fxFlex fxFlex.gt-sm="30"gt;  lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filtrele"gt;  lt;/mat-form-fieldgt;  lt;/divgt;  lt;table mat-table [dataSource]="dataSource" matSort class="stock-table" id="pool-row"gt;  lt;ng-container matColumnDef="Reference"gt;  lt;th mat-header-cell *matHeaderCellDef mat-sort-headergt;  Belge No lt;/thgt;  lt;td mat-cell *matCellDef="let row; let i = index"gt;  lt;p *ngIf="controlReferanceColor(row)" style="color:red;"gt;{{row.Reference}}  lt;/pgt;  lt;p *ngIf="!controlReferanceColor(row)"gt;{{row.Reference}}lt;/pgt;  lt;/tdgt;  lt;/ng-containergt;  lt;ng-container matColumnDef="Actions"gt;  lt;th mat-header-cell *matHeaderCellDefgt;lt;/thgt;  lt;td mat-cell *matCellDef="let row"gt;  lt;a mat-icon-button matTooltip="Detay" *ngIf="row.SourceType?.Id != 32"  [routerLink]="getLink(row)" target="_blank"gt;  lt;mat-icongt;open_in_browserlt;/mat-icongt;  lt;/agt;  lt;button mat-icon-button matTooltip="Liste" *ngIf="row.SourceType?.Id == 32" id="list"  class="sidebar-toggle" (click)="getReferenceList('lab-test-detail-preview',row)"gt;  lt;mat-icongt;pageviewlt;/mat-icongt;  lt;/buttongt;  lt;/tdgt;  lt;/ng-containergt;   lt;tr mat-header-row *matHeaderRowDef="displayedColumns"gt;lt;/trgt;  lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"  [ngClass]="{'amber-fg': controlReferanceColor(row) == true}"gt;lt;/trgt;  lt;/tablegt;  lt;/divgt;  

тс:

 getReferenceList(sidebarName: string, reference: IProcess) {  if (reference amp;amp; reference.Reference != "") {  this.selectedProcessList = this._stockService.processList.find(  (x) =gt; x.Reference === reference.Reference  ).ChildProcessList;  this._fuseSidebarService.getSidebar(sidebarName).open();  }  document.getElementById('pool-row').style.backgroundColor = '#fced49'; }  

Я бы сказал, что все, что вам нужно сделать, это передать свой индекс ngFor в функцию click:

 (click)="getReferenceList('lab-test-detail-preview',row, i)"  

В функции вы сохраняете его в поле компонента

 getReferenceList(sidebarName: string, reference: IProcess, index: number) {  this.currentRow = index;  // ... }  

А затем примените стиль (например, применив класс css) в своем шаблоне

 lt;tr mat-row   *matRowDef="let row; columns: displayedColumns;"  [class.red]="currentRow === i"gt;lt;/trgt;  

Как сказал Анди-Ио, передайте индекс getReferenceList и установите свойство.

 currentRow: number = -1; // or currentRow: number | null = null; // or currentRow: number | undefined = undefined;  getReferenceList(sidebarName: string, reference: IProcess, index: number) {  this.currentRow = index;  // ... }  

(Удалите строку с document.getElementById помощью . Вы всегда хотите напрямую манипулировать dom, только если это невозможно в противном случае.)

Затем в шаблоне измените нижнюю строку следующим образом:

 lt;tr mat-row *matRowDef="let row; let i = index; columns: displayedColumns;"  [ngClass]="{'amber-fg': controlReferanceColor(row) == true, 'cur-row': i === currentRow}"gt;lt;/trgt;  

Примечание: Вам нужно снова захватить индекс.

Объявите соответствующий класс в своем файле scss/css.