javascript - 如何以 Angular 6 显示垫表中每一行的垫旋转器

Question

我有一个 mat-table，显示正在执行的作业列表。我在每行旁边创建了两个按钮(停止和重新运行)。不过，我想创建一个 mat-spinner，仅当作业运行或用户单击“重新运行”按钮时才会显示。 我已经创建了微调器，但当我单击“重新运行”按钮时，它会显示所有行。 如何仅针对我单击的行显示它。

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

typescript 代码:

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 行的运行，则微调器开始显示所有行，并且类似的停止还有。

Answer 1

stop_exec_job 函数仅更改单击的行状态的原因是您实际上设置了传递给该函数的行element 的状态。

您的 re_run_job 函数还设置状态(这很好)，但问题是您在组件中使用一个变量 displaySpinner 来控制 <每行上的所有旋转器。

To solve your problem, add an additional property on your element's which stores the status of the spinner for each row separately (e.g. displaySpinner).

或者，如果微调器基于元素的状态，那么您可以将 HTML 更改为如下所示(并删除 displaySpinner 变量):

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