Question

我有一个Mat表，其中显示了正在执行的作业列表。我在每行旁边创建了两个按钮（停止和重新运行）。但是我想创建一个垫旋转器，该垫旋转器仅在作业正在运行或用户单击“重新运行”按钮时显示。我已经创建了微调器，但是当我单击“重新运行”按钮时，它会显示所有行。如何仅对单击的行显示它。

我的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，并且由于所有行都具有相同属性的条件，所以它们都显示微调器。

请尝试使用displaySpinner，而不要使用element.status。

更改以下几行：

<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函数仅更改单击的行状态的原因是因为您实际上设置了传递给该函数的行element的状态。

您的re_run_job函数也可以设置状态（很好），但是问题是您在组件中使用了一个变量displaySpinner，以控制全部每行上的微调框。

要解决您的问题，请在您的element的分别存储每一行的微调框状态（例如 displaySpinner。

或者，如果微调框基于元素的状态，则可以将HTML更改为如下所示（并摆脱displaySpinner变量）：

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

如何在角度为6的垫子表格中显示每一行的垫子旋转器

3 个答案: