リストに要素を追加した後に入力フィールドを空白にする方法は？

Question

私は自分のコード

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 =''; 
    } 
    } 
} 

が.hereある項目を追加した後、私はすでに空にやる私は空白入力フィールドにしたいクリックした後、button .Butをオフにクリックした後listに項目を追加しようとしています値はありますが、動作しません。 this.val = '';

Answer 1

[value] = "val"を使用できます。 [value]は入力値をvalと結び付けます。これまでvalが変化した場合には、このラインあなたは、変数への入力の値にDataBind双方向にngModelディレクティブを使用することができます

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

代わりの

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

Answer 2

自動的

使用を変更しますあなたのコンポーネントで。

ngModelディレクティブを使用するには、FormsModuleをコンポーネントにインポートする必要があります。

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

コンポーネント内の変数にデータをバインドする場合、値をクリアするだけで入力フィールドが自動的に更新されます。

私はngModelで動作するようにあなたのplunkrを変更：

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

別のアプローチは、直接HTML要素を操作するため@ViewChildを（）、使用することです。