Question

我目前使用的是模态形式，当模态打开时，他会加载我的项目的信息但是当我想提交所有输入时都是null 这是我的模态“这部分工作正常”

from collections import namedtuple
Pair = namedtuple('Pair', ['threshold', 'value'])
pairs = [Pair(t, v) for t, v in zip(thresholds, values)]

这是我的功能提交

for pair in pairs:
    if pair.value != "Not found" and pair.value > pair.threshold:
        function_a()
    else:
        function_b()

这是我的模态作品和我的数据但输出不起作用 http://imgur.com/a/b2CpI

Answer 1

您正在使用index.html中的代码并使用jQuery并弄乱应用程序。

相反，你应该使用模态组件作为单独的组件，如下所示

import {Component,Input, ViewChild} from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'common-modal',
  template: `
   <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">{{title}}</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #formData='ngForm' (ngSubmit)="onSubmit(formData)">
    <div class="modal-content">
      <div class="row">    
        <div class="input-field col s6">
          <input [(ngModel)]="productN" value="true"  name="productN" type="text"  >
          <label for="productN">Product Name</label>
        </div>
        <div class="input-field col s6">
          <input [(ngModel)]="price" value="true"  name="price" type="text"  >
          <label for="price">price</label>
        </div>
        <div class="input-field col s6">
          <input [(ngModel)]="quantity" value="true"   name="quantity" type="text"  >
          <label for="quantity">quantity</label>
        </div>
        <div class="input-field col s6">
          <input [(ngModel)]="photoURL" value="true"   name="photoURL" type="text"  >
          <label for="photoURL">photoURL</label>

        </div>
         <input type="text" placeholder="Full name" value="true" [(ngModel)]="namef" name="namef" class="txt" >
        <input type="text" [(ngModel)]="keyProduct"   name="keyProduct" value="true" >
        <input type="text" [(ngModel)]="typeProduct"   name="typeProduct" value="true" >
      </div>
    </div>
    <div class="modal-footer">
      <button type="submit"  class="modal-action modal-close waves-effect waves-green btn-flat " >Update Product</button>
    </div>
  </form>
      </div>

      <div class="modal-footer">
        <div class="pull-left">
          <button class="btn btn-default" (click)="hide()"> Cancel </button>
        </div>
      </div>
    </div>
  </div>
</div>
  `,
})
export class CommonModalComponent {
   @ViewChild('childModal') public childModal:ModalDirective;
   @Input() title?:string;
  constructor() {
  }
  show(){
    this.childModal.show();
  }
  hide(){
    this.childModal.hide();
  }
  onSubmit(val){
    console.log(val);
  }
}

<强> LIVE DEMO

从表单获取输入值不起作用Angular2

1 个答案: