Angular 5: 如何在项目列表中使用点击事件？

Question

我是一名学生，开始接受 Angular 5 培训。我想即使在 Angular 2 上也可能存在相同的问题。

对于一个项目，我正在尝试创建一个简单的搜索输入框，用户可以在其中输入城市名称，该字段将在下方建议一些名称。然后，当用户点击列表中的项目时，它将显示在输入框中。实际上，它应该像 Google 搜索栏一样工作。

这里是 plunk。我猜它在 plunk 中不会运行，因为我只放了正确的文件来理解，而不是整个应用程序。

这是我的文件： input-form.component.html：

<input
     type="text"
     class="form-control"
     id="InputCity"
     [(ngModel)]="searchText"
     formControlName="city"
     (click)="displayCities()">
        <ul class="results">
            <li>
               <a 
                 class="list-group-item"
                 style="cursor: pointer"
                 *ngFor="let city of citiesListInput | filter : searchText"
                 (click)="putIntoField(city)">
                   {{ city }}
                </a>
            </li>
        </ul>

input-form.component.ts（简称）：

export class InputFormComponent implements OnInit {
  citiesListInput: string[];

  constructor(private citiesSvc: CitiesService) { }

  //Get list of cities from a service//
  displayCities() {
    this.citiesListInput = this.citiesSvc.citiesList;
  }

  //Should send the city clicked in the list in the input field.// 
  //For now i just console log it//
  putIntoField(city: string) {
    console.log(city);
  }
}

第一个问题：在项目列表中，第二次点击事件（putintoField）似乎不起作用。它什么也没做。但是如果我删除ul和li标签，它就可以工作。我错过了什么吗？有没有办法使用ul和li标签来解决这个问题？ 第二个问题：我应该怎么做才能将所选城市放入输入框中？我只是不知道如何选择我的输入值并替换它。

看起来相当简单，但我在互联网上找不到正确的答案。

谢谢大家的回答！

这是我在应用程序模块中声明的过滤器文件：

import { Pipe, PipeTransform } from '@angular/core';

  @Pipe({
    name: 'filter'
  })

export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;

    searchText = searchText.toUpperCase();

    return items.filter( it => {
      return it.toUpperCase().includes(searchText);
    });
  }
}

- Linpter

---

我建议您直接使用Material。他们有一个专门的组件，这样可以避免重复造轮子。https://material.angular.io/components/autocomplete/overview - mgm87

你的问题不够清晰。你从哪里得到了 filter 管道，而且我不明白 this.citiesListInput = this.citiesSvc.citiesList; 是 Promise 还是 Observable 请求？ - Imran

@mgm87，请不要建议第三方插件。专注于这个问题或者不要回答。 - Imran

@Imran 你好，我没有提供服务和筛选文件的详细信息，因为它们与问题无关。第一个只是允许获取城市名称数组，第二个允许在用户输入名称时过滤数组。如果你将它们移除，问题仍然存在。你认为这可能有关联吗？我的初始问题有什么不清楚的地方吗？ - Linpter

@mgm87 确实，这个自动完成是我想要做的。如果我不能让我的代码工作，我可能会尝试它。谢谢。但我真的很想知道我的代码有什么问题，因为它看起来相当简单...我觉得如果我不理解这一点，我就无法在 Angular 编码方面做得好... - Linpter

Answer 1

第一个问题 您的代码没有问题。也许您可以使用*ngif将您的ul绑定起来（您可以将您的citiesListInput: string[];替换为citiesListInput = []声明，并检查*ngIf="citiesListInput.length"。注意：我已经将您的数组this.citiesListInput = ['dhaka', 'sylet', 'manikganj'];替换为this.citiesListInput = this.citiesSvc.citiesList;，它工作得很好。

第二个问题 只需分配您的模型即可。

putIntoField(city: string) {
  this.searchText = city;
  console.log(city);
}

- Imran

---

非常感谢！我会尝试一下。我仍然担心为什么我的初始代码不起作用。这意味着还有其他问题...无论如何，我会在更改后再看看。 - Linpter

针对您的第二个问题，请声明一个属性 public searchText: string。 - Imran

你的第一个问题出现了什么错误？请给我展示错误代码。 - Imran

我认为这是citiesListInput属性声明的问题。请重新检查并在您的displayCities函数中分配一些数组元素，例如this.citiesListInput = ['dhaka', 'sylet', 'manikganj']。 - Imran

我猜这可能与我正在使用城市列表输入服务有关。 - Linpter