javascript - 当服务器接收到数据时,我正在尝试使用 Angular 6 丢弃引导模式
问题描述
嗯,这是我试图创建所有内容的组件。这是一个可以在何时以及我想要的是模式消失时保存数据的杂物。
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Codigos De <b>Acceso.</b></h2>
</div>
<div class="col-sm-6">
<a href="#addProductModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i> <span>Agregar nuevo codigo</span></a>
</div>
</div>
</div>
<div class='col-sm-12 pull-right d-flex flex-row-reverse'>
<div id="custom-search-input">
<div class="input-group">
<input type="text" class="form-control" placeholder="Buscar" aria-label="Input group example" aria-describedby="btnGroupAddon2">
<div class="input-group-append">
<button class="btn btn-primary" id="btnGroupAddon2"><i class="fas fa-search"></i></button>
</div>
</div>
</div>
</div>
<div class='clearfix'></div>
<hr>
<div id="loader"></div>
<div id="resultados"></div>
<div class='outer_div'></div>
</div>
</div>
<!-- Add Modal HTML -->
<div id="addProductModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form #dataForm="ngForm" (ngSubmit)="addData(dataForm)">
<div class="modal-header">
<h4 class="modal-title">Añadir Codigo</h4>
<button type="button" class="close" data-dismiss="modal" id="dismiss" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Código</label>
<input type="text" name="code" class="form-control" #code="ngModel" [(ngModel)]="dataService.selectedData.code" required >
</div>
<div class="form-group">
<label>Dirección</label>
<input type="text" name="direction" class="form-control" #direction="ngModel" [(ngModel)]="dataService.selectedData.direction" required>
</div>
<div class="form-group">
<label>Comentario</label>
<input type="text" name="comment" class="form-control" #comment="ngModel" [(ngModel)]="dataService.selectedData.comment" required>
</div>
<div class="form-group">
<label>Tech #</label>
<input type="number" name="tech" class="form-control" #tech="ngModel" [(ngModel)]="dataService.selectedData.tech" required>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-secondary" data-dismiss="modal" value="Cancelar">
<input type="submit" class="btn btn-primary" value="Guardar datos">
</div>
</form>
</div>
</div>
</div>
<div class="center">
这是我的 ts 文件:
import { Component, OnInit } from '@angular/core';
import { Data } from '../../models/data' // La ruta puede ser distinta.
import { DataService } from '../../services/data.service';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-datas',
templateUrl: './datas.component.html',
styleUrls: ['./datas.component.css'],
providers: [DataService]
})
export class DatasComponent implements OnInit {
constructor(private dataService: DataService) { }
ngOnInit() {}
addData(form: NgForm) {
this.dataService.postData(form.value)
.subscribe(res => {
this.resetForm(form);
})
}
/*
close(form?: NgForm){
if
}*/
resetForm(form?: NgForm) {
if(form){
form.reset();
var dismiss = document.querySelector('#addProductModal');
console.log(dismiss);
this.dataService.selectedData = new Data();
}
}
}
如您所见,最后一个方法称为resetForm,我尝试在发送数据时清理表单并且已经实现,但我需要的是丢弃模态框。有人有想法吗?
解决方案
NPM 立即卸载 jQuery。不要使用 JavaScript 版本的 bootstrap,安装 ngx-bootstrap 并使用 Angular 组件。他们在 Angular 上玩得更好。您的组件不应使用 querySelector 检查 DOM,也不应使用任何 jQuery。如果您使用 ngx-bootstrap 重写组件,您将能够获取 Angular 模态组件的实例并调用 close。
推荐阅读
- javascript - 当我对消息做出反应时,机器人不会赋予角色
- python - sqlalchemy 将标签添加到选择中的静态字符串
- angular - 尝试仅更改角度 Chartjs 中每个标签的标题
- python-3.x - 有两个带有值的列表 blist 和带有索引的 alist 如何根据 pytho 中 Blist 中给出的索引位置将 Alist 的值更改为 0?
- node.js - node -v 显示最新版本,但我的错误日志有不同的
- java - Spring reactive 不支持的扩展类型:org.springframework.data.jpa.repository.support.JpaEvaluationContextExtension
- python - 由于依赖问题,无法在诗歌中安装torch和torchvision的gpu版本
- reactjs - Cashfree 支付网关集成在 react native 和 laravel 中(orderAmount 是必需的错误)
- firebase - Firebase,我如何捕捉异常并告诉用户它?
- java - 在 Android Retrofit Post 调用中将 HashMap 作为 POST 请求值发布