如何從html中的textarea獲取輸入到Angular中的.ts

Question

我是 Angular 的新手，現在我想從 textarea 獲取用戶輸入，但我沒有這樣做。

更新：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

在 html 模板中使用[(ngModel)]而不是 ng-model。 ng-model 是 Angularjs 的語法，它在 Angular2+ 中不起作用。

另外，還要確保導入FormsModule在app.module.ts

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

還將它添加到 app.module.ts 中的導入數組

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

這很重要，因為沒有 FormsModule，angular 將無法識別 ngModel 指令。

另一方面，輸入將返回用戶鍵入的值作為字符串。 要將其讀取為數字並為其加 1，您必須對其進行類型轉換：

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

另請注意， //用於注釋在 html 模板中不起作用，請改用<!-- --> 。