Блог

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

HTML:

 lt;button mat-icon-button class="sidebar-toggle" (click)="preview(row)" [ngClass]="{'yellow' : EditIndex == i}"gt; lt;mat-icongt;pageviewlt;/mat-icongt; lt;/buttongt;  

тс:

 preview(labPeriod: ILabPeriod) {  this.labPeriodPreview = undefined;  this._labService  .getLabAnalysisTestResultsList(labPeriod.LabPeriodId)  .subscribe((response: ILabConditionResult[]) =gt; {  this.labAnalysis.LabConditionResults = response;  labPeriod.LabAnalysis = this.labAnalysis;  this.labPeriodPreview = labPeriod;  this._fuseSidebarService  .getSidebar("analysis-detail-period-preview")  .open();  });  }  

Попробуйте добавить дополнительное свойство к объекту строки с именем isYellow.Если имеет неопределенное или ложное значение, желтый класс не будет отображаться. HTML:

 lt;button mat-icon-button class="sidebar-toggle" (click)="preview(row)" [ngClass]="{'yellow' : row.isYellow}"gt; lt;mat-icongt;pageviewlt;/mat-icongt; lt;/buttongt;  

Тс:

 preview(labPeriod: ILabPeriod) { //new //todo loop through all rows and set isYellow to false labPeriod.isYellow = true; //new  this.labPeriodPreview = undefined;  this._labService  .getLabAnalysisTestResultsList(labPeriod.LabPeriodId)  .subscribe((response: ILabConditionResult[]) =gt; {  this.labAnalysis.LabConditionResults = response;  labPeriod.LabAnalysis = this.labAnalysis;  this.labPeriodPreview = labPeriod;  this._fuseSidebarService  .getSidebar("analysis-detail-period-preview")  .open();  });  }