如何在搜索栏Ionic 4上设置值？

Question

我正试图在搜索栏上设置值，但看不到任何示例，我想要的是将列表的值放入搜索栏（进行自动完成搜索栏），我已完成此代码：

HTML

    <ion-searchbar type="text" debounce="500" animated 
    placeholder="Filtrar por país" color="dark"
    (ionChange)="search($event)" clearInput></ion-searchbar>
<ion-list>
    <ion-item *ngFor="let country of countries" (click)="selectCountry($country)">
        {{ country }}
    </ion-item>
</ion-list>

TS

    search(event) {
    console.log(event)
    this.initializeListCountries();
    console.log(this.countries)
    const val = event.target.value;
    if (val && val.trim() != '') {
        this.countries = this.countries.filter((country) => {
            return (country.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
    }
}

selectCountry(country) {
    let val = country.target.value;

}

谢谢

Answer 1

在这里，您需要在类中声明selectedCountry变量并将所选国家/地区分配给该变量，然后您需要在模板中绑定该变量，如[value]="selectedCountry"

解

HTML

   <ion-searchbar type="text" debounce="500" animated 
    placeholder="Filtrar por país" color="dark" 
    [value]="selectedCountry"
    (ionChange)="search($event)" clearInput></ion-searchbar>
<ion-list>
    <ion-item *ngFor="let country of countries" (click)="selectCountry(country)">
        {{ country }}
    </ion-item>
</ion-list>

TS

selectedCountry: string;//declare global variable

selectCountry(country) {
    this.selectedCountry = country; //assign value

}