Question

我刚从Angular JS 1.6迁移到Angular 6，同时在Angular 6 [(ngModel)]="number1"指令中创建了一个应用程序，用于2路数据绑定。一旦使用它，我的组件就会停止渲染，如果我使用(ngModel)，则该组件会渲染，但是模型变量不会绑定任何数据。如果我将此代码添加到组件TS代码public number1: number = 22;中，则该值永远不会绑定数据。我的打字稿版本是2.9，它确实接受了这段代码let we = "Hello"并引发错误“意外令牌”。 Angular是否像Angular JS一样创建变量，就像我们只在与ng-Model绑定的HTML中编写一个变量一样，该变量也被添加到$ scope对象中，在Angular 6中也是如此。

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

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

 export class CalculatorComponent {

  //var foo = 'Hello TypeScript!';
  public number1: number = 22;
  public number2: number = 22;
  public result: number;

  public add() {
    alert(this.number1);
    alert(this.number2);
    this.result = this.number1 + this.number2;
    }

  }


<div class="container">
    <div class="header">
        <h2>
            Calculator component
        </h2> 
    </div>

    <div class="grid">
        <div class="row">
            <div class="col-6">
                <div class="operation">
                    <div class="row">
                        <div class="col-12">
                            <input  type="number"  placeholder="number" [(ngModel)]="number1">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <input   type="number" placeholder="number" [(ngModel)]="number2">
                        </div>
                    </div>
                    <div>
                        <div class="col-12">
                            <button class="button" (click)="add()">
                                Add 
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="result">
                    <span>
                        Result : {{result}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您是否要在app.module.ts中导入 FormsModule ？

像import { FormsModule } from '@angular/forms';

@NgModule({
  ...
  imports:[ ..., FormsModule ]
  ...
})

重要：对于多个输入字段
中的ngModel

另外，当您将多个输入元素与 ngModel 一起使用时，还必须使用 [ngModelOptions]="{standalone: true}"

因此，您的示例就像

<div class="container">
    <div class="header">
        <h2>
            Calculator component
        </h2> 
    </div>

    <div class="grid">
        <div class="row">
            <div class="col-6">
                <div class="operation">
                    <div class="row">
                        <div class="col-12">
                            <input  type="number"  placeholder="number" [(ngModel)]="number1" [ngModelOptions]="{standalone: true}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <input   type="number" placeholder="number" [(ngModel)]="number2" [ngModelOptions]="{standalone: true}">
                        </div>
                    </div>
                    <div>
                        <div class="col-12">
                            <button class="button" (click)="add()">
                                Add 
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="result">
                    <span>
                        Result : {{result}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

工作示例：stackblitz

Answer 2

尝试以下步骤，

1。将“ @ angular / forms”导入到您的app.module中。

import {FormsModule} from '@angular/forms';

将'FormsModule'添加到app.module中的@NgModule导出数组中

  @NgModule({
  declarations: [..
  ],
  imports: [
    FormsModule
  ],
})

Answer 3

使用ngModel时，需要在控件上包括name属性。

Angular 6数据绑定问题

3 个答案: