Angular在單擊按鈕時更改行的顏色

在我的代碼中，我有一長串元素和一個側邊欄按鈕。由于串列太長，我想記住我點擊過的地方。為此，我希望在單擊按鈕時更改行顏色。這是我到目前為止所做的。我只設法改變了整個表（池行）的顏色。我該怎么做才能只更改所選行的顏色？

HTML：

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

TS：

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

uj5u.com熱心網友回復：

我會說你需要做的就是將你的 ngFor 索引傳遞到 click 函式中：

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

在函式中，您將其保存到組件的欄位中

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

然后在您的模板中應用樣式（例如通過應用 css 類）

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

uj5u.com熱心網友回復：

正如 Andi-Io 所說，將索引傳入getReferenceList并設定一個屬性。

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

（洗掉帶有document.getElementById.的行。如果不可能，您只想直接操作 dom。）

然后在模板中像這樣更改底線：

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

注意：您需要再次抓取索引。

在 scss/css 檔案中宣告相應的類。

標籤：html css 有角的 打字稿

上一篇：Angular多ng類

下一篇：繼承和多模型介面