Question

我正在使用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();
  }

}

Answer 1

确保已安装Bootstrap.js。 Angular-ui在没有它的情况下不会工作。
确保在脚本标记中首先安装Bootstrap。

SRC =＆＃34;〜/脚本/ bootstrap.js＆＃34;

SRC =＆＃34;〜/脚本/ angular.js＆＃34;

SRC =＆＃34;〜/脚本/应用程序/ app.js＆＃34;

SRC =＆＃34;〜/脚本/ UI的自举-TPLS-2.0.0.js＆＃34;
确保在模块中添加ui.bootstrap的依赖项（至少在Angular 1.5中）我不熟悉Angular 2.

如果这不能解决您的问题，请告诉我。

Answer 2

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

如果您是Angular的新手，并且想要以正确的方式实现bootstrap js组件，我建议您阅读ng2文档。

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

上的步骤操作

具有Angular 2的Bootstrap模态

2 个答案: