角度2のブートストラップモーダル

Question

私は角度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(); 
    } 

} 

Answer 1

私はAngular jsにng2-bootstrapライブラリを追加しませんでした。

新しくAngularで、ブートストラップjsコンポーネントを実装したい場合は、ng2のドキュメントを読むことをお勧めします。

私はこのリンクの手順に従いましたhttps://valor-software.com/ng2-bootstrap/#/

Answer 2

1. がBootstrap.jsがインストールされていることを確認しています。 Angular-uiはそれなしでは動作しません。

2. スクリプトタグにBootstrapが最初にインストールされていることを確認してください。

   SRC = "〜/スクリプト/ bootstrap.js"

   SRC = "〜/スクリプト/ angular.js"

   SRC = "〜/スクリプト/アプリ/ app.js"

   SRC = "〜/スクリプト/ UI-ブートストラップ・TPLS-2.0.0.js"

3. （少なくとも角1.5に）あなたのモジュールにui.bootstrapする依存関係を追加していることを確認してください私はに慣れていませんよ角2。

これで問題が解決しない場合は教えてください。