最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

我试图用角6丢弃的引导模式,当服务器接收到数据

IT培训 admin 0浏览 0评论

我试图用角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">&#xE147;</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">&times;</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.selectedDatament" 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: './datasponent.html',
  styleUrls: ['./datasponent.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版本,安装NGX,引导和使用角度分量。他们玩角好得多。您的组件不应该检查与querySelector DOM和你不应该使用任何jQuery的。如果您在使用NGX的自举改写组件,你将能够得到一个角模态分量的一个实例,并调用close。

https://valor-software/ngx-bootstrap/#/modals

我试图用角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">&#xE147;</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">&times;</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.selectedDatament" 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: './datasponent.html',
  styleUrls: ['./datasponent.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版本,安装NGX,引导和使用角度分量。他们玩角好得多。您的组件不应该检查与querySelector DOM和你不应该使用任何jQuery的。如果您在使用NGX的自举改写组件,你将能够得到一个角模态分量的一个实例,并调用close。

https://valor-software/ngx-bootstrap/#/modals

发布评论

评论列表 (0)

  1. 暂无评论