我是一名学生,开始接受 Angular 5 培训。我想即使在 Angular 2 上也可能存在相同的问题。
对于一个项目,我正在尝试创建一个简单的搜索输入框,用户可以在其中输入城市名称,该字段将在下方建议一些名称。然后,当用户点击列表中的项目时,它将显示在输入框中。实际上,它应该像 Google 搜索栏一样工作。
这里是 plunk。我猜它在 plunk 中不会运行,因为我只放了正确的文件来理解,而不是整个应用程序。
这是我的文件: input-form.component.html:
看起来相当简单,但我在互联网上找不到正确的答案。
谢谢大家的回答!
这是我在应用程序模块中声明的过滤器文件:
对于一个项目,我正在尝试创建一个简单的搜索输入框,用户可以在其中输入城市名称,该字段将在下方建议一些名称。然后,当用户点击列表中的项目时,它将显示在输入框中。实际上,它应该像 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);
});
}
}
filter
管道,而且我不明白this.citiesListInput = this.citiesSvc.citiesList;
是 Promise 还是 Observable 请求? - Imran