html - Angular 4提交表单后清空输入框

Question

我想在提交表单后清除输入框。

这是我的 app.component.ts 文件:

todos: string[];

addTodo(todo)
{
   this.todos.push(todo);
   return false;
}

这是我的 app.component.html 文件

<form (submit)="addTodo(todo.value)">
<input type="text" #todo>
<ul>
<li *ngFor="let todo of todos">{{todo}}</li>
</ul>

当我在输入框中填写待办事项，然后按键盘上的回车键或回车键时，它应该会自动清除我的输入框。

Answer 1

在 app.component.ts 文件中更改以下代码:

import { Component,ViewChild,ElementRef } from '@angular/core';
export class AppComponent {

   @ViewChild("todo") el : ElementRef
   addTodo(todo)
   {
       this.todos.push(todo);
       this.el.nativeElement.value = "";
       return false;
   }
}

通过使用它，提交表单后文本框的值将被清除。

希望对您有所帮助!