Question

如何使用TypeScript在Angular 4中设置文本框值？我试过这种方式，但它不起作用。

app.component.html

<form class="example-form">
  <mat-form-field class="example-full-width">
     <input matInput class='aaaa' placeholder="Favorite food" [(ngModel)]="form1" value="{{setTextBoxValue}}">
     </mat-form-field>
  <button (click)='clickMe()'>Click Me</button>
</form>

app.component.ts

import {Component, OnInit} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit {
   title = 'app';
   clickMe() {
     setTextBoxValue: string = "new value";
   }
}

Answer 1

删除value="{{setTextBoxValue}}"，然后使用[(ngModel)]。例如，如果您的组件中有private inputVar: string;（.ts），那么该元素将如下所示：

<input matInput placeholder="Input" [(ngModel)]="inputVar">

在组件（.ts）中，您可以：

constructor() { this.inputVar = "initial value" }

然后是一个像(click)这样的事件按钮：

<button type="button" (click)="changeInputVar()">Test Change</button>

再次在您的.ts中，您已定义changeInputVar()：

private changeInputVar(): void {
  this.inputVar = "changed";
}

这是demo。

Answer 2

只需在函数内设置模型值，

this.fomr1 = "new value";

还要确保在组件中声明了form1，

form1 : string ;

如何使用打字稿设置角度4的文本框值？

2 个答案: