Angular 角度6数据绑定问题

我刚刚从Angular JS 1.6移动到Angular 6，同时在Angular 6中创建了一个应用程序

[（ngModel）]=“number1”

指令用于双向数据绑定。一旦它被使用，我的组件就会停止渲染，如果我使用

（ngModel）

组件就会渲染，但模型变量不会绑定任何数据。 如果我将此代码添加到我的组件TS code

public number1:number=22，该值从不绑定数据。
我的typescript版本是2.9，它确实接受了这段代码
let we=“Hello”
，并抛出了一个错误“意外令牌”
Angular是否像Angular JS一样创建变量，就像我们只在绑定了ng模型的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>

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用计算器”，
templateUrl:“./calculator.component.html”，
样式URL:['./calculator.component.scss']
})
导出类计算器组件{
//var foo='Hello TypeScript！'；
公共编号1：编号=22；
公共编号2：编号=22；
公开结果：数量；
公共添加（）{
警报（本编号1）；
警报（本编号2）；
this.result=this.number1+this.number2；
}
}
计算器组件
添加
结果：{{Result}}
当您使用ngModel时，您需要在控件上包含name属性。
您是否在app.module.ts中导入FormsModule

比如从'@angular/forms'导入{FormsModule}

@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>


计算器组件
添加
结果：{{Result}}

工作示例：
尝试以下步骤

1.在app.module内导入“@angular/forms”

从'@angular/forms'导入{FormsModule}

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

将“FormsModule”添加到app.module中的@NgModule导出数组中
你能在这里添加component.ts代码和component.html代码吗？你能添加组件代码吗？基本上完成了一旦使用我的组件停止渲染我的组件是抛出错误还是什么？您导入了
FormsModule
吗？我看不出您的代码有任何问题可能是其他原因导致了错误如果使用
[（ngModel）]
，则无需使用name属性。在标记中使用ngModel时，您还需要提供一个name属性，以便可以使用该名称向父窗体注册控件。