记录angular8 ngModel双向绑定页面不生效问题

最新推荐文章于 2023-05-10 16:48:45 发布
最新推荐文章于 2023-05-10 16:48:45 发布
阅读量1.1k 收藏 2
点赞数
文章标签： angular.js 前端 angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60144841/article/details/123574533
版权
框架：angular8ui组件：NG-ZORRO问题：switch开关，通过js改变开关状态，html视图不生效代码：html:<nz-switch nzCheckedChildren="启动" nzUnCheckedChildren="停止" name="status" [nzDisabled]="isSwitchState[item.vname]" [nzLoading]="isSwitchState[item.vname]" [(n
摘要由CSDN通过智能技术生成

框架：angular8
ui组件：NG-ZORRO
问题：switch开关，通过js改变开关状态，html视图不生效
代码：
html:

<nz-switch nzCheckedChildren="启动" nzUnCheckedChildren="停止" name="status"  
            [nzDisabled]="isSwitchState[item.vname]"  [nzLoading]="isSwitchState[item.vname]"
            [(ngModel)]="item.status" (ngModelChange)="changeState(item)">
 </nz-switch>

ts:

image.png

image.png

image.png

现象： 在changeState()方法中,如图，修改item.status的状态，只有标红框处修改页面视图状态不生效，在subscribe方法中基础修改是生效的，经查询

最低0.47元/天 解锁文章
柒枼~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angularjs input使用ng-model双向绑定无效问题
Spearmint_的博客
10-09 3404
在开发中有时在input上使用ng-model进行双向绑定时一直不生效的问题 <input type="type" ng-model="inputText"/> $scope.inputText = 123; console.log($scope.inputText) //undefined 而修改变量为 <input type="type" ng-model="m...
解决angular双向绑定无效果,ng-model不能正常显示的问题
10-17
今天小编就为大家分享一篇解决angular双向绑定无效果,ng-model不能正常显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
angular基础之单向绑定，双向绑定以及数据绑定失效的问题
tangdou369098655的博客
06-09 1070
单向绑定 事件绑定： <input (keyup)="inputChange($event)" /> 属性绑定： <input [value]="inputValue" /> 插值绑定 {{myValue}} 双向绑定 <input [(ngModel)]="myInputValue" /> 下面来说一下 ，当你觉得数据绑定失效是怎么回事 很多时候，你会把数据绑定双向写成单向，就会看起来绑定是失效的，所以仔细检查一下你的[(ngModel)]是不是
【AngularJS】解决ng-if中的ng-model值无效的问题
weixin_44241821的博客
02-26 868
与其他指令一样，ng-if指令也会创建一个子级作用域，因此，如果在ng-if指令中添加了元素，并向元素属性增加 ng-model指令，那么ng-model指令对应的作用域属性子级作用域，而并非控制器注入的$scope作用域对象，这点在进行双向数据绑定时，需要引起注意。 a 的值： {{a}} b 的值： {{b}} 普通方式： ngIf方式：
记一次angularjs ng-model 绑定无效的bug
空想家Achen的博客
02-03 434
<tr ng-if="isCheckAll==true"> <th valign="top">{{ 'updateorder.NEWORDER' | translate}} :</th> <td> <inp..
AngularJS ng-model在select下拉框中不起作用
qq_49726384的博客
12-26 745
AngularJS ng-model在select下拉框中不起作用
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
10-18
双向数据绑定是Angular中的一个强大特性，它通过`[(ngModel)]`语法糖来实现。`ngModel`指令允许我们将表单控件的值与组件类中的属性绑定在一起，这样当用户在界面上进行输入时，组件模型会自动更新，反之亦然。例如...
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
10-17
在Angular4中，双向数据绑定通常使用`[(ngModel)]`指令来实现，它使得视图和模型之间的数据同步变得简单。然而，当我们在自定义组件中，特别是那些不包含`input`元素的组件上使用`ngModel`时，需要采取一些额外的...
理解Angular数据双向绑定
09-02
AngularJS 的核心特性之一就是数据双向绑定，它使得数据模型与用户界面之间的同步变得更加简单。 **一、什么是数据双向绑定** 数据双向绑定是 AngularJS 的一个重要概念，它确保了模型（Model）和视图（View）之间...
antd angular ＜nz-checkbox＞ (ngModelChange)事件无法触发，应该是 (nzCheckedChange)
m0_60745105的博客
05-10 415
被官方API坑了，感觉大多数控件的change事件，都是(ngModelChange)，官方文档也写的这个，但是死活不生效。
angularjs结合jquery等js插件 双向绑定不生效解决办法
zl378837964的专栏
09-14 695
       前言：在使用Angularjs时候，可能还是会使用一些jQuery等插件，或者其他javascript插件。这个时候最常见的问题就是: 使用插件进行赋值后，angularjs进行的双向绑定不生效，js修改了表单值却不在model中更新 。。[一脸懵逼]。。    问题：  前段时间也遇到了使用时间插件时候对时间表单绑定数据失效的问题，并尝试多种方法解决   原因： ...
iviewUI组件库中select双向绑定不生效
qq_42112846的博客
01-08 1747
前端小伙伴们有没有遇到过这样的场景，iviewUI组件库中select双向绑定数据时，修改了绑定值，但是页面中渲染的值还是之前的值，不管是去打印还是使用vue插件去查看变量，均显示绑定值已修改，可是页面始终显示修改之前的数据，是不是很困恼，心中简直是卧槽、卧槽、卧槽。 我之前做过很暴力的事情，就是在select标签上绑定v-if，在修改v-modal的值时，对v-if对应的变量先赋值false，...
ngModel 值不更新/显示
weixin_33919941的博客
06-29 525
angular中的$scope是页面（view）和数据（model）之间的桥梁，它链接了页面元素和model，也是angular双向绑定机制的核心。 而ngModel是angular用来处理表单（form）的最重要的指令，它链接了页面表单中的可交互元素和位于$scope之上的model，它会自动把ngModel所指向的model值渲染到form表单的可交互元素上，同时也会根据用户在for...
Angular：(ngModelChange)没有实时触发的问题解决
灿灿大王搭建的黄金屋
11-14 8299
在页面上的嵌套表单上，有两个字段分别为金额1（amountOne）和金额2（amountTwo），我想要实现实时捕捉这两个字段的值的变化：限制页面上的金额2要大于金额1。 一开始写的代码如下： 这两个字段作为editClauseForm表单下的嵌套表单purchaseFlowTempDetailVOList中的两个字段，formControlName分别是amountOne和amounTwo ...
ng-zorro中的Switch开关
web
07-03 2490
我在angular项目里要使用Switch开关，第一次使用antd里的开关，记录下： 效果： 后台返回的数据： 看isUpload，如果返回true，就是上报。返回false，就是不上报。根据true和false来决定开关的走向 代码实现： 1、引入antd 步骤：https://ng.ant.design/docs/getting-started/zh 2、使用 // <nz-switch [ngModel]="你的数据" nzCheckedChildren="是" nzUnCheckedCh
angular2在双向数据绑定时[(ngModel)]无法使用的问题
xiaohelan的博客
04-14 293
angular2在双向数据绑定时[(ngModel)]无法使用，出现的错误是： Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’. 解决办法： 在文件 app.component.ts 中引入ngModel 具体为： 添加两行代码： import { FormsModule } from ‘@angular/for...
Element UI中table表格中使用Switch 开关及调接口
Jadon_z的个人博客
08-29 3696
Element UI中table表格中使用Switch 开关及调接口
angular中ng-model或者ng-click失效
zyh2525246的博客
10-29 1344
在input中时使用ng-model失效。 原因：使用了ng-if导致ng-model失效。（ng-if有自己的子作用域） 解决办法：使用ng-show或者ng-model绑定$parent.value (value为需要绑定的父作用域中实际的值)。 ...
angular双向绑定无效果，ng-model不能正常显示
一生为追梦的博客
06-07 5927
今天遇到了个问题，js代码中变量已经变化了，但是html页面中没有正常的显示出来。代码如下：&lt;input type="text" ng-model="paramValue" auto-focus&gt;$scope.paramValue = param;以上代码就会造成有时input框中无内容的情况，打断点显示$scope.paramValue是有值的，但是页面就是啥都显示不出来。换成下边代...
angular双向绑定原理
最新发布
09-17
Angular的双向数据绑定原理是通过指令和scopes实现的。Angular提供了一些内置指令，例如ngModel和ngBind，它们可以轻松地实现双向数据绑定。双向数据绑定允许数据在模型和视图之间的自动同步更新。 在Angular中，数据绑定是通过scopes实现的。Scopes是数据模型的一个抽象，它负责管理模型与视图之间的数据交互。AngularJS的scopes包括了一些方法和属性，例如$watch和$apply，它们能够实现双向数据绑定的功能。 一个简单的例子可以说明双向数据绑定的原理。在下面的例子中，通过ng-controller指令创建了一个作用域，并通过ng-bind指令将counter变量绑定到span元素上。当点击按钮时，触发了ng-click指令中的counter++操作，从而改变了counter变量的值。由于双向数据绑定的原理，span元素上的内容也会自动更新。 <div ng-controller="CounterCtrl"> <span ng-bind="counter"></span> <button ng-click="counter++">increase</button> </div> function CounterCtrl($scope) { $scope.counter = 1; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值