angular2+ 版本中使用ng-bootstarp模块中的modal模态框

最新推荐文章于 2021-03-10 10:53:23 发布
最新推荐文章于 2021-03-10 10:53:23 发布
阅读量810 收藏
点赞数
分类专栏： angular2.x 文章标签： angular js
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/xuehu837769474/article/details/89447459
版权

在angular2+ 版本中使用ng-bootstrap模块中的modal模态框中，当使用表单的select以及input的值得改变来出发modal弹出时暴露出的错误

如图html页面

ts

当使用ngModel和（change）或者(ngModelChange)时会报一下错误

自己经过尝试也没有好的解决办法，只能变通一下啦

解决办法：

首先不用ngModel，改用value来做到值得绑定

ts不变，这样就可以避免以上发生的错误了

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

 

极地雪狼li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ng2-bootstrap-modal：用于简化引导模式对话框的库
01-31
＃Angular2引导程序模式服务它是一个库，使Angular2中的引导模态插件的使用更加容易。 创建清晰且可重复使用的模态组件。 它使管理对话框变得轻松而清晰。 库不使用bootstrap js，仅使用CSS。 与引导程序3和引导程序...
Angular2学习笔记——NgModule
weixin_34138139的博客
09-17 163
　　在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。 　　模块是用来组织应用的，通过模块机制外部类库可以很方便的扩展应用，Rc5之后，Angular2将许多常用功能都分配到...
angular模态框位置_angular2 ngbootstrap 模态框用法
weixin_39677870的博客
12-20 232
import {Component, ViewEncapsulation} from "@angular/core";import {NgbModal} from '@ng-bootstrap/ng-bootstrap';@Component({selector: 'model-test',encapsulation: ViewEncapsulation.None,styles: [`.dark-...
angular6使用ngx-bootstrap/modal
henreash的专栏
08-05 6465
首先下载ngx-bootstrap：npm install ngx-bootstrap --save 下载后，在module.ts中导入ngx-bootstrap/modal类： import { ModalModule } from 'ngx-bootstrap';   imports: [     ...     ModelModule,     ModalModule.forRoot(...
在Angular中使用ngx-bootstrap modal模态框
前端啤酒屋
03-10 1838
bootstarp 中存在modal 模块，也称之为模态框 使用方法也是较为简单： 首先看一下ngx-bootstrap的官方网站：点击进入 若卡顿请采用科学上网 基本用法 注入模块，建议在全局进行注入 // RECOMMENDED import { ModalModule } from 'ngx-bootstrap/modal'; // NOT RECOMMENDED (Angular 9 doesn't support this kind of import) import { ModalMod.
AngularJS中使用ngModal模态框
silyvin
04-19 2910
https://blog.csdn.net/u013360850/article/details/54318156   AngularJS中使用ngModal模态框 在AngularJS中使用模态框需要引用的文件：  angular.js 1.5.5ui.bootstrap-tpls.js 0.11.2bootst
Angularjs中的ui-bootstrap的使用教程
01-21
2.新建uiBootstrap.js文件，定义一个uiModule 模块，引入依赖的模块 /** * Created by zhong on 2015/9/7. */ var uiModule = angular.module(uiModule,[ui.bootstrap,ui.router]); }); 3.定义dialog弹出窗口的...
ng-bootstrap：角动力Bootstrap
01-29
NG Bootstrap-角动力Bootstrap小部件 ... 如果您有一个Angular≥9 CLI项目，则可以简单地使用我们的原理图向其中添加ng-bootstrap库。 只需运行以下命令： ng add @ng-bootstrap/ng-bootstrap 它将为angular.js
ngx-modal:Angular的动态模态对话框
05-14
如果您使用的是Angular的旧版本，请使用。目录： IModalDialogBu​​tton IModalDialogSettings 执照 安装npm install --save ngx-modal-dialog 这个怎么运作模态对话框使用ComponentFactoryResolver将给定的子组件...
rebirth-ng：rebirth-ng是用于Angular和bootstrap的ui框架
01-31
@重生/ NG 带有引导程序的Angular UI插件; 在线文档链接： : 角度4：版本<= 0.0.23； Angular 5：版本> = 5.0.0 Angular 6：版本> = 6.0.0 组件 手风琴 警报框 徽章 模态 警报/确认 复选框/广播组 ...
Angular2组件库 - Modal组件实现详解（一）
weixin_33721344的博客
03-02 2925
这篇文章其实写的有点晚了。去年6月份，Angular2的版本刚升级到rc-4，一切都还处于蛮荒时期（虽然现在依然不是太稳定...）。当时为我们的组件库开发Modal组件，因为严格遵守ant design的规范来开发，所以Modal包含了Directive和Service两种模式 Directive模式非常符合Angular2的...
Angular2.0下实现的modal框
april_4的博客
10-29 2904
觉得写的比较巧妙的就是样式的选取~记录下 CSS部分 .font { font-family: "Microsoft YaHei", Arial; font-size: 12px; color: #333333; } .ky-modal-content { min-width: 520px; min-height: 240px; } .ky-moda
Angular4_Bootstrap 模态框避免点击背景处关闭（ng-bootstrap）
Martin 的博客
02-09 2587
this.modalService.open( this.chooseManagementDecisionOrOtherReasonModal, { backdrop: 'static', keyboard: false} ).result.then((result) =&gt; { console.log(result); if ...
angular2+ modal向父组件传值
qq_37477349的博客
05-10 1049
需求：ngalain 和 ng-zorro 只提供了关闭事件向父组件传值，但我需要的是弹窗打开时，点击列表某一行即向父祖件传当前行信息 新建modal.service.ts import { EventEmitter, Injectable } from '@angular/core'; // 从根注入 @Injectable({ providedIn: 'root', }) // 这种写法需要在x.module.ts providers 里注入 // @Injectable() export
Angular两种模态框弹出方式
热门推荐
曩昔方的博客
10-18 2万+
本博客参考自https://github.com/cipchk/ngx-bootstrap-modal和https://valor-software.com/ngx-bootstrap/#/modals，这两个网址几乎涵盖了所有的angular弹框
angular2 ngbootstrap 模态框用法
chixian4839的博客
10-17 200
import {Component, ViewEncapsulation} from "@angular/core"; import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'model...
angular4自定义模态弹框
涂涂
09-22 8458
代码记录，便于下次不会： 模板： class="alerting"> class="alertContent" ontouchmove="event.preventDefault();event.stopPropagation();"> >内容 class="backdrop-div" (click)="backdro
编写一个Angular程序,使用ng-zorro-antd组件库中的7种组件实现相应的功能。
最新发布
05-25
好的，我可以给您提供一个简单的Angular程序示例，用于展示如何使用ng-zorro-antd组件库中的7种组件实现相应的功能。 1. Button组件 Button组件是一个常用的用户交互组件，我们可以用它来实现点击事件等功能。 ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值