我有一张6列的垫子桌。在第5列中，它显示作业的状态，即已完成、正在运行或挂起。
我已经创建了两个按钮，即停止和重新运行。
我想写一个函数，如果作业完成了，那么停止按钮应该被禁用，重新运行应该被启用，这意味着用户应该能够重新运行完成的作业，如果作业正在执行或挂起（等待执行），那么停止按钮应该被启用，重新运行应该被禁用，这意味着用户应该能够停止正在运行的作业。
有人能帮我吗？
我创造了一个样本stackblitz here.
HTML代码：
<div class="main-content">
<mat-toolbar>
<mat-progress-bar
mode="indeterminate"
class="mat-progress-bar"
color ="primary"
>
</mat-progress-bar>
<button
mat-icon-button
(click)="stop_exec_job()"
matTooltip="Stop Executing the Job"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
</mat-toolbar>
<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()"
matTooltip="Stop Executing the Job"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
<!-- Delete icon for row -->
<button
class="stop_btn"
mat-icon-button
color="#b71c1c"
(click)="re_run_job()"
matTooltip="Re-Run the Job"
>
<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">
</mat-row>
</mat-table>
</div>
类型脚本代码：
import { Component, OnInit } 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 {
stop_btn: boolean = true;
re_run_btn: boolean = true;
jobExecStatDisplayedColumns = [
"id",
"exec_date",
"prev_time_period",
"curr_time_period",
"status",
"actions"
];
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() {
}
re_run_job() {
}
}
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;
}
出于某种原因，stop和cached是图标，在我的visual studio中，我可以看到图标，但在stackblitz中，我无法将它们转换为图标。
仅供参考，停止在红色是停止和缓存在绿色是重新运行
最佳答案
如果要禁用表中的按钮，则必须使用disabled属性并检查元素状态。
[disabled]="element.status === 'Completed'" // The button will be disabled if status is Completed
[disabled]="element.status === 'Running'" // Disabled if status is Running
考虑到您的标准，您的停止按钮将如下所示：
<button
[disabled]="element.status === 'Completed'"
mat-icon-button
(click)="stop_exec_job()"
matTooltip="Stop Executing the Job"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
你的重新运行按钮如下：
<button
[disabled]="element.status === 'Running'"
class="stop_btn"
mat-icon-button
color="#b71c1c"
(click)="re_run_job()"
matTooltip="Re-Run the Job"
>
<i class="material-icons" style="color:green">
cached
</i>
</button>
关于javascript - 如何在 Angular 7中发挥作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54306442/