Angular2 - 表示テキストボックスに入力した値のテキストを削除/キャンセルし、テキストの削除/キャンセルをクリックして入力フィールドをクリアします。

Question

私はangular2を学習していて、ページにテキストボックスがあるシナリオを実装しようとしています。 テキストボックスに値を入力するたびに、テキストをキャンセル/削除して右に表示し、テキストボックスの入力値をクリアする必要があります。 私のHTML-

<md-input #productName name="productName" (keydown)="handleKeyDown($event)" type="text" placeholder="Start typing to select product types"></md-input> 

では、私は追加して、テキストを入力すると、クロスアイコンで取り消しテキストを表示する方法を把握することはできませんよ。 これを実現するためにhandleKeyDown関数を調整する方法を教えてもらえますか？

Answer 1

この要素を表示/非表示にするには*ngIfを使用する必要があります。入力をクリアするにはngModelを使用できます。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <br /> 

     <input [(ngModel)]="name" /> 
     <button *ngIf="name" (click)="name = ''">clear</button> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { } 
} 

ライブデモ：https://plnkr.co/edit/oXl4LEJK3sEc5HxXAaxe?p=preview