Angular 6，通过调用Web服务保存数据后，通过新功能将"保存"按钮更改为"部署"按钮

Question

我有一个带有某些输入元素的表单，我可以保存此数据并在特定情况下检查某些检查强制性字段的验证（如果表单已验证并准备好部署数据，我都有一个显示此表格移至部署部门的标志）我需要更改此保存按钮以使用新功能部署按钮。

project.html：

<form * ngIf="selectedProject" #projectAddForm = "ngForm"(ngSubmit) = "addProject(projectAddForm)" >
<button>Save < /button>
<button *ngIf="deploymentDepartment" type = "button"(click) = "deployNewTemplate()" > Deploy < /button>
 // Some inputs elements
< /form>

project.ts：

    addProject(projectAddForm: any): void {
    this.newProject = new project();
 // Assign the input values to newProject properties
    this.projectService.addProject(this.newProject)
            .subscribe(
                (data: project) => {
                    // Imagine new added project validated and go to next deploy department
                    If(data.department = “deploymentDepartment”)
                    // How at this point change Save button by Deploy button with new functionality ??? 
                },
                (error: any) => {
                }
            );

非常感谢！

Answer 1

取布尔型型varaible

打字稿

    let deploymentDepartment:boolean;
        ngOnInit() {
        this.deploymentDepartment = false;
      }
this.projectService.addProject(this.newProject)
    .subscribe(
        (data: project) => {
            // Imagine new added project validated and go to next deploy department
            If(data.department = “deploymentDepartment”)
            this.deploymentDepartment = true;
        },
        (error: any) => {
        }
    );

html

使用禁用属性绑定

<button [disabled]="deploymentDepartment" >Save < /button>
 < button  [disabled]="!deploymentDepartment" type = "button"(click) = "deployNewTemplate()" > Deploy < /button>

Answer 2

标记：

<button *ngIf="data?.deploymentDepartment != 'deploymentDepartment'" (click)="addProject()">Save</button>
<button *ngIf="data?.deploymentDepartment == 'deploymentDepartment'" (click)="deployNewTemplate()">Deploy</button>

组件：

this.projectService.addProject(this.newProject)
    .subscribe(
        (data: project) => {
            this.data = data;
        },
        (error: any) => {
        }
    );

确保在组件上添加数据属性。