0

我想创建一个带有搜索栏的下拉列表，该列表包含来自 REST API 的数据。最初在我创建的搜索栏中，我只能选择该项目，但无法在搜索栏中显示该项目。我希望所选项目显示在搜索栏中。如何显示该所选项目。

我需要显示它，因为我正在构建一个级联下拉列表，其中第一个列表的输入提供给第二个列表。

如果有人可以通过记住数据是使用 POST 方法从 REST API 呈现的来向我提供代码，我将不胜感激。这是我在 html 页面中调用的函数。userData 是一个对象类型的数组，因为我需要获取 JSON 数据。我收到一条错误消息，指出对象类型的属性 toLowerCase 不能存在。

    loadusers(ev:any){
  this.UserService.post('search/getusers',{}).subscribe(resp=>{
     this.userData = resp.data;
     console.log(this.userData); 
    },
    err=>{console.log(err);},
    ()=>{});

     let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.userData = this.userData.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

这是我试图与搜索栏一起显示数据的 HTML 文件。我也不知道要在 isChanged 函数中包含什么。

   <ion-searchbar  [(ngModel)]="mySearchInput" (ionInput)="loadusers($event)"></ion-searchbar>
<ion-content >
<ion-list radio-group [(ngModel)]="selectedValue">
<ion-item class="border" *ngFor="let val of userData">
<ion-label>{{val.name}}</ion-label>
<ion-radio class="resolvedState" value="{{val.name}}" (ionSelect)="isChanged(val)"></ion-radio>
</ion-item>
</ion-list>

创建具有这些功能的搜索栏的最佳做法是什么？

4

0 回答 0