Javascript 如何在角7中生成函数

我有一张6列的席子桌。在第5列中，它显示作业的状态，即已完成、正在运行或挂起。 我创建了两个按钮，即停止和重新运行。 我想写一个函数，如果作业已完成，则应禁用停止按钮，并启用重新运行，这意味着用户应能够重新运行已完成的作业，以及作业是否正在执行或挂起（等待执行）然后应该启用“停止”按钮并禁用“重新运行”，这意味着用户应该能够停止正在运行的作业。 有人能帮我吗

我已经创建了一个示例

HTML代码：

<div class="main-content">
<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_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>

停止
作业执行统计信息
身份证件
{{element.id}
执行日期
{{element.exec_date}
当前时间段
{{element.curr\u time\u period}
上一时段
{{element.prev_time_period}
地位
{{element.status}
停止
缓存

打字脚本代码：

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

从“@angular/core”导入{Component，OnInit}；
从“@angular/material”导入{MatTableDataSource}；
从“../../services/globalAppSate.service”导入{GlobalAppSateService}；
从“../../services/data.service”导入{DataService}；
从“../custom components/snak bar/snak-
条形元件'；
@组成部分({
选择器：“应用程序作业执行屏幕”，
templateUrl:“./job execution screen.component.html”，
样式URL:[“/job execution screen.component.scss”]
})
导出类JobExecutionScreenComponent实现OnInit{
stop_btn:boolean=true；
重新运行：布尔值=真；
jobExecStatDisplayedColumns=[
“身份证”，
“执行日期”，
“上一个时间段”，
“当前时间段”，
“地位”，
“行动”
];
jobExecutionStat=新MatTableDataSource（元素数据）；
构造函数（私有数据服务：数据服务，公共GlobalAppStateService:
GlobalAppStateService，专用snakbar:SnakBarComponent）{
}
恩戈尼尼特（）{
const project=JSON.parse（this.dataService.getObject（“项目”）；
如果（项目！=null）{
这个.globalAppSateService.onMessage（项目）；
}
}
停止执行作业（）{
}
重新运行作业（）{
}
}
常量元素_数据：元素[]=[
{
id:1，
执行日期：“2016年1月17日”，
上一时间段：“2016-042016-052016-06”，
当前时间段：“2016-08”，
状态：“已完成”
},
{
id:2，
执行日期：“2017年1月17日”，
上一时间段：“2017-042017-052017-06”，
当前时间段：“2017-08”，
状态：“正在运行”
},
{
id:3，
执行日期：“2017年7月27日”，
上一时间段：“2017-452017-462017-47”，
当前时间段：“2018-012018-02”，
状态：“待定”
},
{
id:4，
执行日期：“2018年10月17日”，
上一时间段：“2017-302017-312017-32”，
当前时间段：“2018-012018-02”，
状态：“已完成”
},
{
id:5，
执行日期：“2018年1月21日”，
上一时间段：“2016-012016-022016-032016-04”，
当前时间段：“2016-52”，
状态：“待定”
},
{
id:6，
执行日期：“2018年1月17日”，
上一个时间段：“2017-312017-322017-332017-34”，
当前时间段：“2017-52”，
状态：“正在运行”
}
];
导出接口元素{
id：编号；
执行日期：字符串；
上一个时间段：字符串；
当前时间段：字符串；
状态：字符串；
}

出于某种原因，“停止”和“缓存”都是图标，在我的visual studio中我可以看到图标，但在stackblitz中，我无法将它们转换为图标。

---

仅供参考红色的stop为stop，绿色的cached为re run

使用

disabled

禁用按钮或

*ngIf

将其从DOM中完全删除

<button mat-icon-button [disabled]="isRunning" (click)="stop_exec_job()" matTooltip="Stop Executing the Job"></button>

<button mat-icon-button [disabled]="!isRunning" (click)="stop_exec_job()" matTooltip="Stop Executing the Job"></button>

---

如果要禁用表中的按钮，必须使用

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>

缓存

您的问题到底是什么？图标未显示或按钮未工作或状态未持续？按钮未工作。我创建了一个函数stop\u exec\u job，但我不知道如何编写一个函数，如果状态已完成，则应启用“重新运行”按钮。图标不显示是为了让SOF用户在看到StackBlitz时不会感到困惑。我想要这个东西，但基于一个条件。如果“我的表格”的“状态”列已完成，则应启用“停止”\u btn；否则，如果其处于挂起状态，则应启用“停止”disabled@saad-您的stackblitz与您问题中的代码完全不同。如果您想使用单个状态来禁用按钮，可以执行以下操作。您可以根据自己的需要进一步定制，概念是一样的，我想要这样的东西，但是你的代码做的是，如果我点击它，停止按钮消失，如果我点击重新运行，然后重新运行按钮disappears@saad-请参阅我的第一行

使用disabled禁用按钮或*ngIf将其从DOM中完全删除。

如果按钮不再可见。不，我正在使用您的更新答案。即已禁用且不为*ngIf

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