在列表中添加元素后如何清空输入字段？

Question

我想在点击 button 后在 list 中添加项目。但是点击后我想在添加项目后空白输入字段。这里是我的代码

https://plnkr.co/edit/0sG16dVeHIWAvBjYpIjQ?p=preview

export class App {
   title = 'Times point';
  name ="hellxo";
  val ="defual";
  items=[];
  onKeyP(event){
    console.log(event.target.value);
    this.val=event.target.value
  }

  addItem(){
    if(this.val){
    this.items.push(this.val);
    this.val ='';
    }
  }
}

我已经做了空值但没有工作 this.val ='';

Answer 1

你可以使用[值] ="val"。 [value] 将您的输入值与 val 绑定。当 val 改变时它会自动改变

使用这条线

<input type="text" name="" (keyup)="onKeyP($event)" [value]="val"/>

而不是

<input type="text" name="" (keyup)="onKeyP($event)"/>

Answer 2

您可以使用 ngModel 指令将输入值双向数据绑定到组件中的变量。

为了使用 ngModel 指令，您需要将 FormsModule 导入到您的组件中。

import { FormsModule } from '@angular/forms';
...
@NgModule({
    imports: [ BrowserModule, FormsModule ],
    ...
})

将值数据绑定到组件中的变量时，您只需清除该值，angular 将自动更新输入字段。

我更改了您的 plunkr 以使用 ngModel：

https://plnkr.co/edit/uF2jkMeVxzgW5aKiqa7i?p=preview

另一种方法是使用@ViewChild() 来直接操作 HTML-Element。

在列表中添加元素后如何清空输入字段？

how to blank input field after adding element in list?

javascript

angular2-routing

angular