Как получить входные данные из текстовой области в html в .ts в Angular

Question

Я новичок ie в Angular, и теперь я хочу получить пользовательский ввод из текстовой области, но мне не удается это сделать.

Обновлено: ng-model = "num1"> [( ngModel)] = "num1"

HTML:

<span><input [(ngModel)]="num1" type="text" placeholder="Enter value"></span>
     // user enter one number

<span><input type="text" readonly value={{answer}}></span></p>

<button class="result" (click)=onSelectEqual()>=</button>
     // click this button to get the value that user entered

.ts:

num1 : number;
answer: number;

onSelectEqual(){
  this.answer = this.num1 + 1 ;
}

Answer 1

В angular, для two-way binding необходимо заключить ngModel в [()]. См. - https://angular.io/api/forms/NgModel.

<span><input [(ngModel)]="num1" type="text" placeholder="Enter value"></span>

Answer 2

Используйте [(ngModel)] вместо ng-модели в вашем html шаблоне. ng-модель - это синтаксис Angularjs, который не будет работать в Angular2 +.

Также убедитесь, что импортирован FormsModule в app.module.ts

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

Также добавьте его в массив import в app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

Это важно, поскольку без FormsModule angular не сможет определить директиву ngModel.

В другое примечание: ввод вернет значение, введенное пользователем в виде строки. Чтобы прочитать его как число и добавить к нему 1, вам нужно будет ввести его:

onSelectEqual(){
  this.answer = Number(this.num1) + 1 ;
}

Обратите внимание, что // для комментариев не работает в шаблоне html, используйте <!-- --> вместо.