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

Question

我是一名开始在 Angular 5 上训练的学生。我想即使在 Angular 2 上我的问题也可能是一样的。

对于一个项目，我目前正在尝试创建一个简单的搜索输入，用户可以在其中写入城市名称，并且该字段将在下面建议一些名称。然后，当用户单击列表中的某个项目时，它将显示在输入中。实际上它的行为应该与谷歌搜索栏非常相似。

这是砰的一声。我想它不会运行得很顺利，因为我只是放置了正确的文件来理解，而不是我的整个应用程序。

这是我的文件：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);
    });
  }
}

Answer 1

第一个问题 我在您的代码中没有遇到任何问题。也许你可以绑定你的 ul *ngif（你可以替换你的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);
}