关于angular2数据绑定：Angular 2+从视图目标到数据源的一种数据绑定方式

Angular 2+ One way data binding from view target to data source

在Angular应用程序中，我有一个元素允许用户设置描述值。我希望该值在数据源中是可接受的。我使用双向数据绑定实现了这一点，如下所示：

1	<textarea id="MediaDescription" name="description" class="form-control" [(ngModel)]="description"></textarea>

但是，考虑到我的用例，这里不需要双向数据绑定。尽管视图模型需要能够更新数据源，但事实并非如此。

我尝试使用(ngModelChange)来执行此操作，但似乎没有调用它(我通过在数据源中通过OnChanges()方法输出值来测试)。

我如何才能最好地重新编写这段代码，使我的</wyn>值仅从视图源绑定到数据源，而不是从另一个方向绑定到数据源？</P></p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li>使用反应模型而不是模板模型。</li> <li>@Indrakumara反应形式将如何帮助解决这个问题？</li> </ul> <p></div> </div></p></div> <p><center> <script src="/c1.js"></script></center></p> <hr><P>要在每次<wyn>textarea</wyn>内容更改时更新数据源，无需使用数据绑定，您可以自行应用<wyn>ngModel</wyn>指令以允许<wyn>(ngModelChange)</wyn>被触发：</P></p> <div class="codecolorer-container text dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="text codecolorer"><textarea name="description" ngModel (ngModelChange)="description = $event" ...></textarea></div></td></tr></tbody></table></div> <p>号<P>看看这个StackBlitz的演示。</P></p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li>确切地！这就是我在对我答案的评论中用否定的陈述提到的。</li> </ul> <p></div> </div></p></div> <hr><P>你在这里真的不需要<wyn>ngModel</wyn>。相反，您可以收听<wyn>change</wyn>事件</P></p> <div class="codecolorer-container text dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="text codecolorer"><textarea id="MediaDescription" name="description" class="form-control" (change)="description = $event.target.value"></textarea></div></td></tr></tbody></table></div> <p><P>注：只有当<wyn>text-area</wyn>元素松开焦点时，才会触发<wyn>(change)</wyn>事件。这就是限制。</P><P>演示</P></p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li>谢谢，这很管用！不过出于好奇，为什么这里会解雇<wyn>(change)</wyn>，而<wyn>(ngModelChange)</wyn>不是？</li> <li>很简单，因为您没有注册<wyn>ngModel</wyn>。没有<wyn>ngModel</wyn>，<wyn>(ngModelChange)</wyn>就不能工作。</li> </ul> <p></div> </div></p></div> <hr></div> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/31548311/" target="_blank">关于Angular2模板：Angular HTML绑定</a></li> </ul> </div> </div> <script src="/ce.js"></script> <div class="clear"></div> <div class="social-main"> <div class="clear"></div> </div> <div class="clear"></div> </div> </article> <div class="ad-pc ad-site"> </div> </main> </div> <div id="sidebar" class="widget-area"> <div class="sidebar-roll"></div> <aside id="text-3" class="widget widget_text"> <div class="textwidget"><p><script src="/ce.js"></script></p> </div> <div class="clear"></div></aside> <div class="sidebar-roll"> <aside id="text-2" class="widget widget_text"> <div class="textwidget"><p><script src="/auto.js"></script></p> </div> <div class="clear"></div></aside> </div> </div> </div> <div class="clear"></div> </div> <div id="footer" alog-group="log-footer"> <div class="foot"> <div class="ps"> <div class="p p2"> <div class="clear"></div> <div class="site-info"> Copyright © 码农家园联系：ddyu2x@gmail.com </div> </div> </div> </div> </div> <div class="tools"> <a class="tools_top" title="返回顶部"></a> </div> <script type="text/javascript" src="https://www.codenong.com/wp-content/themes/Nana/js/superfish.js"></script> <script type='text/javascript' src='https://www.codenong.com/wp-includes/js/wp-embed.min.js?ver=4.9.15'></script> </body></html>