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

回答

相關問題