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

Question

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

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

你可以使用[value] =＆＃34; val＆＃34;。 [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。