Angular 6 数据绑定问题

Question

我刚刚从 Angular JS 1.6 迁移到 Angular 6，而在 Angular 6 中创建应用程序 [(ngModel)]="number1" 指令用于 2 路数据绑定。一旦使用它，我的组件就会停止渲染，如果我使用(ngModel)，组件就会渲染，但模型变量不会绑定任何数据。 如果我在组件 TS 代码public number1: number = 22; 中添加此代码，则该值永远不会绑定数据。 我的 typescript 版本是 2.9，它确实需要此代码 let we = "Hello" 并引发错误“Unexpected Token”。 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 中使用 超过 1 个输入 元素时，您必须使用 [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.在您的 app.module 中导入“@angular/forms”。

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

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

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

Answer 3

当你使用 ngModel 时，你需要在你的控件中包含 name 属性。