angular - 如何在按钮单击时显示新的 Mat-Progress 按钮

问题描述

我有一个显示 Jobs 列表的 mat-table。我创建了一个函数来停止和重新运行 Jobs。每当用户单击重新运行时，都会显示一个 mat-progress bar，表明作业正在执行，用户可以通过按下停止按钮来终止作业。但是，我想为每个正在运行的作业显示单独的垫子进度条。

Stackblitz 链接在这里

我怎样才能做到这一点？HTML 代码：

<div class="main-content">
<ng-container *ngIf="displayProgBar">
    <mat-toolbar>
        <mat-progress-bar
            mode="indeterminate"
            class="mat-progress-bar"
            color="primary"
        >
        </mat-progress-bar>
        &nbsp;&nbsp;
        <button
            mat-icon-button
            (click)="stop_exec_job2()"
            matTooltip="Stop Executing the Job"
        >
            <!-- Edit icon for row -->
            <i class="material-icons" style="color:red"> stop </i>
        </button>
    </mat-toolbar>
</ng-container>
<div class="card">
    <div class="card-header">
        <h5 class="title">Job Execution Stats</h5>
    </div>

    <mat-table [dataSource]="jobExecutionStat">
        <!-- Id Column -->
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.id }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="exec_date">
            <mat-header-cell *matHeaderCellDef>
                Execution Date
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.exec_date }}
            </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="curr_time_period">
            <mat-header-cell *matHeaderCellDef>
                Current Time Period
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.curr_time_period }}
            </mat-cell>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="prev_time_period">
            <mat-header-cell *matHeaderCellDef>
                Previous Time Period
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.prev_time_period }}
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.status }}
            </mat-cell>
        </ng-container>

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

        <mat-header-row
            *matHeaderRowDef="jobExecStatDisplayedColumns"
        ></mat-header-row>
        <mat-row
            *matRowDef="
                let row;
                columns: jobExecStatDisplayedColumns;
                let element
            "
            (click)="showProgressBar(element)"
        >
        </mat-row>
    </mat-table>
</div>

打字稿代码：

import { Component, OnInit, ɵConsole } from "@angular/core"; 
import { MatTableDataSource } from "@angular/material";
import { GlobalAppSateService } from "../../services/globalAppSate.service";
import { DataService } from "../../services/data.service";
import { SnakBarComponent } from "../custom-components/snak-bar/snak- 
bar.component";

@Component({
selector: "app-job-execution-screen",
templateUrl: "./job-execution-screen.component.html",
styleUrls: ["./job-execution-screen.component.scss"]
})
export class JobExecutionScreenComponent implements OnInit {
displayProgBar:boolean = false;

jobExecStatDisplayedColumns = [
    "id",
    "exec_date",
    "prev_time_period",
    "curr_time_period",
    "status",
    "actions"
];
public selectedElem : any;

jobExecutionStat = new MatTableDataSource<Element>(ELEMENT_DATA);
constructor(
    private dataService: DataService,
    public globalAppSateService: GlobalAppSateService,
    private snakbar: SnakBarComponent
) {}
ngOnInit() {
    const project = JSON.parse(this.dataService.getObject("project"));
    if (project != null) {
        this.globalAppSateService.onMessage(project);
    }
}

stop_exec_job(element) {
    if(element.status == 'Running' || element.status == 'Pending') {
        this.displayProgBar = false;
        this.snakbar.statusBar('Job Execution Stopped','Sucess');
        element.status = 'Completed';
    }
}

stop_exec_job2(){
    this.stop_exec_job(this.selectedElem);
    this.displayProgBar = false;

}

re_run_job(element) {
    if(element.status == 'Completed') {
        this.snakbar.statusBar('Job Execution Started','Sucess');
        element.status = 'Running' ;
    }
}
showProgressBar(element) {
    this.selectedElem = element;
    if(element.status == 'Running' || element.status == 'Pending'){
        this.displayProgBar = true
    }



}
}
const ELEMENT_DATA: Element[] = [
{
    id: 1,
    exec_date: "17-01-2016",
    prev_time_period: "2016-04,2016-05,2016-06",
    curr_time_period: "2016-08",
    status: "Completed"
},
{
    id: 2,
    exec_date: "17-01-2017",
    prev_time_period: "2017-04,2017-05,2017-06",
    curr_time_period: "2017-08",
    status: "Running"
},
{
    id: 3,
    exec_date: "27-07-2017",
    prev_time_period: "2017-45,2017-46,2017-47",
    curr_time_period: "2018-01,2018-02",
    status: "Pending"
},
{
    id: 4,
    exec_date: "17-10-2018",
    prev_time_period: "2017-30,2017-31,2017-32",
    curr_time_period: "2018-01,2018-02",
    status: "Completed"
},
{
    id: 5,
    exec_date: "21-01-2018",
    prev_time_period: "2016-01,2016-02,2016-03,2016-04",
    curr_time_period: "2016-52",
    status: "Pending"
},
{
    id: 6,
    exec_date: "17-01-2018",
    prev_time_period: "2017-31,2017-32,2017-33,2017-34",
    curr_time_period: "2017-52",
    status: "Running"
}
];
export interface Element {
id: number;
exec_date: string;
prev_time_period: string;
curr_time_period: string;
status: string;
}

标签： angulartypescriptangular-material

angular - 如何在按钮单击时显示新的 Mat-Progress 按钮

问题描述

解决方案

推荐阅读