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>

在我的代码中，我想引用id为tbPlaceholder的输入，这样我就可以将它设置为所选div的文本。问题是我不知道如何引用tbPlaceholder

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

Answer 1

有些图书馆允许这样做，例如Angular Material and its autocomplete。但是也许你不能使用它，所以这就是：

首先，您有数据：

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

如果查询存在，此管道将返回过滤结果，如果查询为空，则返回所有结果。

现在你有了管道，你必须在HTML中显示结果：

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

现在，这应该可行。

如何在Angular 4中引用输入？

1 个答案: