角度4で入力を参照するにはどうすればよいですか？

Question

私は達成したい次のタスクを持っています。ユーザーは入力要素に入力し、divは入力結果に関連する結果を表示します。 divを選択すると、そのテキストが入力に割り当てられます。典型的なオートコンプリート機能です。

|celio | -> this is the input       |celio mendez| 
<celio batista> -> div   after selecting the div 
<celio mendez> -> div 

マイテンプレート：私のコードで

<input id="tbPlaceholder" (click)="search($event.target.value)" /> 

<div *ngFor="let address of data"> 
<div (click)="selectAdress($event.target.innerText)"> {{ address.street}}</div> 

、私は私が選択したdiv要素のテキストにそれを設定することができるようにtbPlaceholderのIDを入力を参照したいです。問題は、私はtはAngular Material and its autocompleteような

selectAdress(address: String) : void 
{ 
    //how to reference tbPlaceholder? 
} 

Answer 1

いくつかのライブラリがあることが可能tbPlaceholderを参照する方法を知っている「とドンということです。しかし、多分あなたはそれを使用することはできませんので、ここではそれが行く：

data = ['result 1', 'result 2', 'result 3']; 

を、あなたのフォームの項目があります：

まず、あなたがあなたのデータを持っている

今

autocompleteQuery: string; 

、私の解決策をあなたがそれを使用する方法を知っている場合は、パイプを使用することであるため、ここではそれが行く：

transform(results: string[], query: string): string[] { 
    return query ? 
    results.filter(r => r.toUpperCase().includes(query.toUpperCase())) : 
    results; 
} 

このパイプは、フィルタリングされた結果のIを返します。クエリが存在する場合、またはクエリが空の場合はすべての結果が返されます。

<input type="text" [(ngModel)]="autocompleteQuery" /> 
<ng-container *ngIf="autocompleteQuery"> 
    <div *ngFor="let d of data | myFilteringPipe:autocompleteQuery">{{d}}</div> 
</ng-container> 

そして今、これは動作するはずです：

は今、あなたはあなたのパイプを持っていることを、あなたはあなたのHTMLに結果を表示する必要があります。