Question

我想知道，在将值提交给服务之后，如何隐藏下面显示的Bootstrap模式表单。我试过评论代码，但没有帮助我。有没有其他选择。？的 settings.component.ts

import { Component, OnInit} from '@angular/core';
import { CategoryVM } from '../view-models/category';
import { AppDataService } from '../services/app-data.service';
import { NgForm } from '@angular/forms';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Location } from '@angular/common';
//declare var $: any;

@Component({
    selector: 'app-settings',
    templateUrl: './settings.component.html',
    styleUrls: ['./settings.component.css']
})
export class SettingsComponent implements OnInit {
    categories: CategoryVM[] = [];
    form: FormGroup;
    errorMessage: string;
          //visible: boolean;
          //private visibleAnimate = false;

          // public visible = true;

    constructor(private dataService: AppDataService, private location: Location) {
        dataService.getCountries().subscribe((data) => this.categories = data);
    }

    ngOnInit() {
        this.dataService.vm = { ParentId: 0, Name: "" };
                // this.visible = true;
    }
    onBack() {
        this.errorMessage = null;
        this.location.back();
    }

    onCancel() {
        this.onBack();
    }
    onSubmit(form: NgForm) {
        this.dataService.createCategory(form.value)
            .subscribe(data => {
                alert("Value Added Successfully");
                      //$("#myModal").hide();
                      //$("#myModal").modal("hide");

                      // this.visible = false;
                this.categories.push(data);

                   //document.getElementById("openModalButton").click(); 
            });
    }    
}

请关注上面的OnSubmit（）事件，下面是模板

settings.component.html

    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">start here</button>
<!--<button id="openModalButton" [hidden]="true" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">start here</button>-->

              <div id="myModal" class="modal fade" role="dialog">
            <!--<div id="myModal" class="modal fade" role="dialog" *ngIf="visible">-->
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Login</h4>
                    </div>

                    <div class="modal-body">

                        <form class="cat-form" #categoryForm="ngForm" (ngSubmit)="onSubmit(categoryForm)">
                        <!--<form class="cat-form" #categoryForm="ngForm"   (ngSubmit)="onSubmit(categoryForm);visible=false;">-->

                            <label>Name</label>
                            <div class="form-group">
                                <input class="form-control" name="Name" placeholder="Name" #Name="ngModel" [(ngModel)]="dataService.vm.Name">
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-8">
                                    <button type="submit" class="btn btn-lg btn-block btn-primary">Create</button>
                                </div>
                                <div class="form-group col-md-4">
                                    <button type="button" class="btn btn-lg btn-block" (click)="onCancel()" data-dismiss="modal">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
    </div>

如果我使用注释的代码行，Modal-form将隐藏，但不透明度仍然如此图所示

Answer 1

您的注释代码是一个jQuery代码，因此我假设您不使用Angular Framework（例如ng-bootstrap）。

你应该看看并集成Bootstrap的一个抽象。在组件中使用jQuery意味着你直接操作dom，这真的不是一个好方法。

https://ng-bootstrap.github.io/ https://github.com/valor-software/ngx-bootstrap

如何在提交值后隐藏bootstrap模态形式，在vs2017中使用Angular2

1 个答案: