Bootstrap Modal with Angular 2

我正在使用Angular 2的模态。到目前为止这么好没有错误，但随后......当我按下按钮时什么也没有出现。我错过了什么吗？当然我做..Bootstrap Modal with Angular 2

这是我的模板

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
      {{demoInfo | json}} 
      </div> 
      <div class="modal-body"> 
      <form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup"> 
       <div class="col-md-7"> 
       Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'> 
       </div> 

       <div class="col-md-7"> 
       Password: <input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password'> 
       </div> 
      </form> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button> 
      </div> 
     </div> 

     </div> 
    </div>

这是我的模板组件

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators } from '@angular/common'; 


class DemoInfo { 
    name: string; 
    password: string; 
} 

@Component({ 
    template: require('./template.component.html'), 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES] 
}) 

export class ModalComponent { 
    CreateGroup: ControlGroup; 
    demoInfo: DemoInfo; 
    constructor(fb: FormBuilder) { 
    this.demoInfo = new DemoInfo(); 

    this.CreateGroup = fb.group({ 
     'name': new Control(this.demoInfo.password), 
     'password': new Control(this.demoInfo.password) 
    }) 
    } 
    addNewGroup(demoInfo: DemoInfo) { 
    console.log(demoInfo, 'whole object'); 
    this.demoInfo = new DemoInfo(); 
    } 

}

来源

2016-07-29 Cecil Boye

我没有在Angular js中添加ng2-bootstrap库。

如果您是Angular的新手，并且想要实现引导js组件，那么我推荐您阅读ng2文档的正确方法。

我按照此链接上的步骤https://valor-software.com/ng2-bootstrap/#/

来源

2016-08-02 12:23:59

确保选中已经安装Bootstrap.js。没有它，Angular-ui将无法工作。
确保在脚本标记中首先安装Bootstrap。

SRC = “〜/脚本/ bootstrap.js”

SRC = “〜/脚本/ angular.js”

SRC = “〜/脚本/应用/ app.js”

src =“〜/ Scripts/ui-bootstrap-tpls-2.0.0.js”
请确保您在模块中添加了对ui.bootstrap的依赖关系（至少在Angular 1.5中）我不熟悉Angular 2.

让我知道如果这不能解决您的问题。

来源

2016-07-29 15:26:51

Bootstrap Modal with Angular 2

回答

相关问题