Question

我正在尝试创建一个简单的计算器来获取输入字段的值并在同一页面上使用它，但ng-model没有输出字段的输出值。

我在JsFiddle上尝试了相同的代码并且它工作正常，但我不确定为什么它不适用于该应用程序。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="panel panel-default" ng-app="">
<form class="form-group panel-body">
  <input ng-model="totalitems"  type="number">
</form>
<br>
<h2 class="label-default">{{totalitems}}</h2>
</div>

＆＃13;

import { Component, Input, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Product Cost Calculator';

}

我的申请名称是＆＃34; calc＆＃34;我在body标签上使用ng-app="calc"。

Answer 1

我正在使用Angular 2并且在视图中＆gt;形式＆gt;输入我使用的ng-model与Angular 2不兼容，并替换为[(ngModel)]。我进一步修改了HTML代码，以消除因使用[(ngModel)]而导致的错误，因为我在表单中使用了此错误，输入缺少name属性。当[(ngModel)]属性存在输入或没有表单的地点输入时，name有效。

<div class="panel panel-default" ng-app="">
<form class="form-group panel-body">
  <input [(ngModel)]="totalitems"  type="number" name="total_items">
</form>
<br>
<h2 class="label-default">{{totalitems}}</h2>
</div>

如何使用ng-model在Angular TypeScript中使用输入字段的值？

1 个答案: