Question

我在AngularCLI中有一个应用程序。我在数据集上使用ngFor循环并在keyup上使用输入字段进行搜索。问题是，我的输入搜索功能对于所有迭代都是相同的，因此搜索会在所有迭代中发生。我如何区分每个元素？有没有办法使元素active = keyup事件？如果您需要查看更多代码，请与我们联系。

<div *ngFor="let elem of dataset; trackBy: customTrackBy; let i = index">
   <div> 
    <label for="positionCompanyName">Company Name </label>
    <input id="positionCompanyName" (keyup)="$event.target.value && searchCompany$.next($event.target.value)">
     <ul *ngIf="companyResults">
       <a *ngFor="let companyResult of companyResults"> </a>
     </ul>
   </div>
</div>

处理程序：

this.searchService.searchCompany(this.searchCompany$)
.subscribe(companyResults => {
  this.companyResults = companyResults
});

// Company Search
searchCompany(terms: Observable<string>) {
return terms.debounceTime(400)
  .distinctUntilChanged()
  .switchMap(term => this.searchCompanyEntries(term));
}

searchCompanyEntries(term) {
return this.http
    .get(this.clearbitUrl + this.queryUrl1 + term)
    .map(res => res.json());
}

Answer 1

为unique Id，

取name和input fields

您可以使用id或index，

执行此操作

id="positionCompanyName_{{i}}" name="positionCompanyName_{{i}}"

<div *ngFor="let elem of dataset; trackBy: customTrackBy; let i = index">
   <div>
    <label for="positionCompanyName">Company Name </label>
    <input id="positionCompanyName_{{i}}" name="positionCompanyName_{{i}}" (keyup)="$event.target.value && searchCompany$.next($event.target.value)">
     <ul *ngIf="companyResults">
       <a *ngFor="let companyResult of companyResults"> </a>
     </ul>
   </div>
</div>

Answer 2

将搜索功能传递给元素索引。类似的东西：

<input id="positionCompanyName" (keyup)="$event.target.value && searchCompany$.next({ val: $event.target.value, id: elem.id })">

而不是elem.id（您可能没有它），您可以使用元素独有的其他内容，或者可以传递索引（来自let i = index），以便您知道数组中的哪个元素已触发此

现在，无论处理程序如何处理此事件，都将采用两个参数而不是一个参数，并且能够更好地集中搜索。

如何在特定元素上运行keyup？

2 个答案: