javascript - Angular 2 一种在 HTML 上绑定(bind)数据的方式,就像我们在 Angular 1 中使用的那样:

标签 javascript angularjs angular2-template two-way-binding

在 Angular 2 中有什么方法可以像在 Angular 1 中那样实现单向数据绑定(bind)。

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
<h4>please change the text box value to see the scenario</h4>
  <p>Name : <input type="text" ng-model="name" 
ng-init="name='change me '"></p>
  <h1>Hello {{name}}</h1>
<h2>One-way binding- </h2>
{{::name}}
</div>

</body>
</html>

我们如何以 Angular 2 的方式实现这一目标。我们有什么替代方案。

注意:我不想仅在 HTML 上反射(reflect)更改。我需要更新后的值 @component end,但我不想仅在 UI 上显示更改

最佳答案

Angular 2 中的双向数据绑定(bind)如下所示:

<input type="text"  [(ngModel)]="name">

Angular2 中的一种数据绑定(bind)方式是通过删除括号实现的,即 [ngModel]

<input type="text"  [ngModel]="name" (ngModelChange)="onChange($event)">
onChange(newvalue) {
//work with newvalue
}

希望对您有所帮助!

关于javascript - Angular 2 一种在 HTML 上绑定(bind)数据的方式,就像我们在 Angular 1 中使用的那样:,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45072397/

相关文章:

javascript - 用于检查文本框的 jQuery 函数

javascript - 使用 jQuery 从 JSON 对象值创建一个数组

javascript - AngularJS ng-change 不起作用

javascript - 在 jQuery 1.9.1 中检索输入文本值的正确方法

javascript - 页面并不总是识别带有 ES6 promise 的 ng-if/new $scope 变量

javascript - 如何使用 Angular.js 和 PHP 按字母顺序显示列表

c# - AngularJs $http.post 不渲染新 View

Angular 2 RC6 - "sidebar"不是已知元素

angularjs-directive - typescript 错误 TS2339 : Property 'project' does not exist on type '{}'

angular2 - 引用组件中的 &lt;input&gt; 模板引用变量来更改 value 属性