Как показать циновку для каждого ряда в мат-таблице под углом 6

Question

У меня есть таблица соответствия, которая отображает список выполняемых заданий.Я создал две кнопки (Stop и Re-Run) рядом с каждой строкой.Однако я хочу создать вращающийся мат, который будет отображаться только во время выполнения задания или когда пользователь нажимает кнопку повторного запуска.Я создал счетчик, но он отображается для всех строк, когда я нажимаю кнопку «Повторный запуск».Как показать его только для строки, по которой я нажал.

Мой 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");
    }
}

Остановка и повтор-run кнопка работает нормально. Если я нажму стоп на строке 2, то изменится только состояние строки 2. Но если я нажму на запуск строки 1, тогда закрутка начнет показываться для всех строк и аналогично для остановки.

Answer 1

Свяжите счетчик со статусом элемента:

<!-- 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>

Я бы также рекомендовал создать перечисление для ваших Statusses для удобочитаемости и согласованности.

Answer 2

Причина, по которой функция 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>

Answer 3

Ваше свойство 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>