当我单击 Angular 中的按钮时，如何输入我在输入字段中写的内容？答案

【问题标题】：How to type out what I write in input field when I click a button in Angular?当我单击 Angular 中的按钮时，如何输入我在输入字段中写的内容？
【发布时间】：2020-02-26 11:17:37
【问题描述】：

所以我想在输入文本字段中写一些东西，然后按下按钮并在此处显示 <p>Hello {{inputValue}}</p> 。我不想为此使用 keyup。我也将它保存在本地存储中，它现在可以工作，但如果我删除 keyup 就不行。

我的 .ts 文件：

  selector: 'app-dialouge',
  templateUrl: './dialouge.component.html',
  styleUrls: ['./dialouge.component.css']
})

export class DialougeComponent implements OnInit {
  inputValue: string;
  onKeyUp(event){
    this.inputValue = event.target.value;
  }

  saveBtn(): void {
    console.log("btn clicked: " + this.inputValue);
    window.localStorage.setItem("inputValue", this.inputValue);
    window.localStorage.getItem("inputValue");
  };
  clearStorage(){
    localStorage.clear();
    console.log("ls cleared");
  }


  constructor() { }

  ngOnInit(): void {

  }

}

我的模板文件：

<input type="text" (keyup)="onKeyUp($event)" />
<button (click)="saveBtn()">save</button>
<button (click)="clearStorage()">clear</button>

<p>Hello {{inputValue}}</p>

【问题讨论】：

请不要破坏您的帖子。通过在 Stack Exchange 网络上发布，您已授予 SE 分发该内容的不可撤销的权利（在 CC BY-SA 3.0 license 下）。根据 SE 政策，任何破坏行为都将被撤销。

标签： angular typescript button input

【解决方案1】：

您可以在input 中使用ngModel 而不是keyup。

如下所示更改您的 HTML，

<input type="text" [(ngModel)]="inputValue" />
<button (click)="saveBtn()">save</button>
<button (click)="clearStorage()">clear</button>

<p>Hello {{inputValue}}</p>

从您的 ts 文件中删除 onKeyUp 方法。

【讨论】：

【解决方案2】：

您应该使用[(ngModel)] 将其更改为input，因为使用[(ngModel)] 更合适。 keyup 在您从键盘上松开手指时触发。

<input type="text" [(ngModel)]="inputValue" />
<button (click)="saveBtn()">save</button>
<button (click)="clearStorage()">clear</button>

<p>Hello {{afterButtonPressedValue}}</p>

创建另一个值以显示和输入：inputValue 用于输入，afterButtonPressedValue 用于在模板中显示。

你的 ts 将是：

  selector: 'app-dialouge',
  templateUrl: './dialouge.component.html',
  styleUrls: ['./dialouge.component.css']
})

export class DialougeComponent implements OnInit {
  inputValue: string;
  afterButtonPressedValue = '';

  saveBtn(): void {
    console.log("btn clicked: " + this.inputValue);
    window.localStorage.setItem("inputValue", this.inputValue);
    window.localStorage.getItem("inputValue");
    this.afterButtonPressedValue = this.inputValue;
  };
  clearStorage(){
    localStorage.clear();
    console.log("ls cleared");
    this.afterButtonPressedValue = '';
  }


  constructor() { }

  ngOnInit(): void {

  }

}

【讨论】：