如何在角度為6的墊子表格中顯示每一行的墊子旋轉器

Question

我有一個墊子表，其中顯示了正在執行的作業列表。 我在每行旁邊創建了兩個按鈕（停止和重新運行）。 但是我想創建一個墊旋轉器，該墊旋轉器僅在作業正在運行或用戶單擊“重新運行”按鈕時顯示。 我已經創建了微調器，但是當我單擊“重新運行”按鈕時，它會顯示所有行。 如何僅對我單擊的行顯示它。

我的html代碼：

 <!--  Code for Stop and Re-Run Buttons -->
        <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element; let index = index">
                <button
                    mat-icon-button
                    (click)="stop_exec_job(element)"
                    matTooltip="Stop Executing the Job"
                    [disabled]="element.status == 'Completed'"
                >
                    <!-- Edit icon for row -->
                    <i class="material-icons" style="color:red"> stop </i>
                </button>
                <!-- Delete icon for row -->
                <button
                    mat-icon-button
                    (click)="re_run_job(element)"
                    matTooltip="Re-Run the Job"
                    [disabled]="
                        element.status == 'Running' ||
                        element.status == 'Pending'
                    "
                >
                    <i class="material-icons" style="color:green">
                        cached
                    </i>
                </button>
            </mat-cell>
        </ng-container>
        <!-- Code for Spinner -->
        <ng-container matColumnDef="spinner">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element">
                <div *ngIf="displaySpinner;else doNotShowSpinner">
                    <mat-spinner></mat-spinner>
                </div>
                <ng-template #doNotShowSpinner>

                </ng-template>
            </mat-cell>
        </ng-container>

        <mat-header-row
            *matHeaderRowDef="jobExecStatDisplayedColumns"
        ></mat-header-row>
        <mat-row
            *matRowDef="
                let row;
                columns: jobExecStatDisplayedColumns;
                let element
            "
            class="element-row"
        >
        </mat-row>

打字稿代碼：

displaySpinner: boolean = false;

stop_exec_job(element) {
    if (element.status == "Running" || element.status == "Pending") {
        //Api to stop Job Execution
        this.recommendationService
            .stopJobExecution(element.jobId, "Cancelled")
            .subscribe(data => {
                this.executeJobStop = data;
                //this.changeStatus.push(this.executeJobStop);
                // this.newStatus = new ExampleDataSource();
            });
        this.displaySpinner = false;
        element.status = "Completed";
        this.snakbar.statusBar("Job Execution Stopped", "Sucess");
    } else {
        this.snakbar.statusBar("Job Failed to start", "Failure");
    }
}

re_run_job(element) {
    if (
        element.status == "Cancelled" ||
        element.status == "Completed" ||
        element.status == "Executed" ||
        element.status == "FINISHED"
    ) {
        //Api to Re-Run Job Execution
        this.recommendationService
            .stopJobExecution(element.jobId, "Running")
            .subscribe(data => {
                this.executeJobStop = data;
                //this.changeStatus.push(this.executeJobStop);
                // this.newStatus = new ExampleDataSource();
            });
        this.displaySpinner = true;
        element.status = "Running";
        this.snakbar.statusBar("Job Execution Started", "Sucess");
    } else {
        this.snakbar.statusBar("Job Failed to start", "Failure");
    }
}

停止並重新運行按鈕可以正常工作。如果我單擊第2行的停止，則只有第2行的狀態會更改。但是如果我單擊第1行的運行，則微調器將開始為所有行顯示並且也為stop顯示類似的內容。

Answer 1

該類的displaySpinner屬性（這是全局屬性）將在所有行中使用。 這就是為什么當您單擊“重新運行”時， displaySpinner變為true並且由於所有行都具有相同屬性的條件，因此它們都顯示了微調器。

嘗試使用element.status而不是使用displaySpinner 。

更改以下行：

<div *ngIf="displaySpinner;else doNotShowSpinner">
    <mat-spinner></mat-spinner>
</div>

到下面：

<div *ngIf="element.status === 'Running';else doNotShowSpinner">
    <mat-spinner></mat-spinner>
</div>

Answer 2

將微調器鏈接到元素狀態：

<!-- Code for Spinner -->
        <ng-container matColumnDef="spinner">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element">
                <div *ngIf="element.status === 'Running'">
                    <mat-spinner></mat-spinner>
                </div>
                <ng-template #doNotShowSpinner>

                </ng-template>
            </mat-cell>
        </ng-container>

我還建議為您的狀態創建一個枚舉，以提高可讀性和一致性。

Answer 3

stop_exec_job函數僅更改單擊的行狀態的原因是因為您實際上設置了傳遞給該函數的rows element的狀態。

您的re_run_job函數還可以設置狀態（很好），但是問題是您在組件中使用了一個變量displaySpinner來控制每一行上所有微調器的可見性。

要解決您的問題，請在element上添加一個額外的屬性，該屬性分別為每行存儲微調器的狀態（例如displaySpinner ）。

或者，如果微調器基於元素的狀態，則可以將HTML更改為如下所示（並擺脫displaySpinner變量）：

<div *ngIf="element.status === 'Pending' || element.status === 'Running'">
  <mat-spinner></mat-spinner>
</div>