我如何使用angular2单击添加按钮获取表单模型

Question

company.html

   

     <section class="main">
      <h1>Company Management</h1>
         <md-card class="mat-card">
           <button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
 
        <md-card-title class="md-title mat-card-title">
          <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Username</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Email</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Type</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Active</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Action</span>
            </div>
          </div>
          <hr>
        </md-card-title>
        <md-card-content class="md-content mat-card-content">
          <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Hotel</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>hotel@gmail.com</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>company</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span></span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <button class="iconBtn">
                <i aria-hidden="true" class="fa fa-pencil"></i>
              </button>
              <button class="iconBtn">
                <i aria-hidden="true" class="fa fa-pencil"></i>
              </button>
            </div>
          </div>
          <hr>
        </md-card-content>
      </md-card>
    </section>

    <ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" 
    (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a modal.
  </div>
</ng-template>

company.component.ts

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { ModalModule } from 'ngx-bootstrap/modal'; 
import { NgModule }  from '@angular/core';
import { Router } from '@angular/router';

@Component({
  templateUrl: './company.html'
})
export class CompanyComponent {

}
export class DemoModalServiceStaticComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

@NgModule({
  imports: [ModalModule.forRoot()]
})
export class AppModule{

}

在这里，我需要在单击 add_button(+) 时显示一个表单（一种弹出框），但在点击 add_button(+) 后它不显示任何内容我如何使用 angular2 单击添加按钮获取表单模型？？？（示例：我希望在单击 add_button[+] 后显示一个弹出框）

Answer 1

使用 ngx-bootstrap，它提供所有 bootstrap javascript 组件，而无需在您的组件中写入任何 jQuery。

Here 是如何在您的应用中实现模态的完整教程。

Answer 2

您似乎错过了 data-target="#myModal" 属性添加按钮。请添加后查看

Answer 3

从'@angular/core'导入ElementRef &ViewChild 如果你想访问你的#template，你只需要创建一个viewchild变量：

@ViewChild("template") template: ElementRef;

然后您可以使用 this.template 访问它，它有很多价值。

然后如果你想访问一个表单进入模态，你也可以在你的表单中添加一个#form然后访问this.modal.form

我如何使用angular2单击添加按钮获取表单模型

how do i get form model on clicking the add button using angular2

html

javascript

jquery

ngx-bootstrap

angular

company.html

company.component.ts