如何使用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

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

@ViewChild("template") template: ElementRef;

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

然后，如果要将表单访问到模式，还可以在表单中添加#form，然后访问this.modal.form

Answer 2

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

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

Answer 3

您似乎错过了添加按钮上的 data-target =“＃myModal”属性。请添加它，然后检查。