Question

我是一名开始在Angular 5上训练的学生。我猜我的问题在Angular 2上也可能是相同的。

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

这是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标签吗？

第二个问题：如何将所选城市放入输入字段？我只是错过了如何选择输入值并替换它。

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

感谢大家的回答！

这是我的过滤器文件，在app模块中声明：

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

第一期 我的代码中没有任何问题。可能您可以使用*ngif绑定您的ul（您可以将citiesListInput: string[];替换为citiesListInput = []声明。并检查*ngIf="citiesListInput.length"。注意：我更换了您的数组{{1而不是this.citiesListInput = ['dhaka', 'sylet', 'manikganj'];而它的工作正常

第二期 只需指定你的模型

this.citiesListInput = this.citiesSvc.citiesList;

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

1 个答案: