Question

我正在使用搜索栏ionInput事件在列表中进行搜索，但是过滤后的输出只显示一个列表，而不显示其他页面上的其他列表？

我的第一个列表代码：- HTML

<ion-searchbar class="ion-no-padding" showcancelbutton="true" (ionInput)="onSearchChange($event)" placeholder="search manga"></ion-searchbar>
     <ion-list no-lines *ngFor="let anime of animelist" >
        <ion-item>
          <h2>Name : &nbsp; {{anime.t}}</h2>
        </ion-item>
     </ion-list>

我的.ts文件

getanimelist(){
  this.restProvider.getanimelist().subscribe(data => {
    this.animelist =   data;
    console.log('result ' + JSON.stringify(data) );
  });

  this.items= this.animelist;


}
onSearchChange(evt: any) {
  this.getanimelist();


  console.log(this.items);
  console.log(evt);

  const val = evt.srcElement.value;

  console.log(val);

  if (!val){
   return ;
  }

  this.animelist = this.items.filter((data) => {

  // console.log(data);
  if (data.t && val){
      if (data.t.toLowerCase().indexOf(val.toLowerCase()) > -1){
         return true;
      }
      return false;
    }
  })
}

我对此的api调用：-

apiUrl= 'https://www.mangaeden.com/api';
getanimelist(){
    return this.http.get(this.apiUrl+'/list/0').pipe(
      map(result => {
        return result['manga'];
      })
    )}
}

此列表的输出确实得到过滤，我的列表也按照输入的值在页面上得到更新，但是对于其他页面上的第二个列表，iam使用相同的概念相同的代码，但是我的输出没有在页面上被过滤，在控制台日志中，我看到过滤的结果，但是我的页面列表没有更新

下面的第二个列表代码：- HTML

<ion-searchbar class="ion-no-padding" showcancelbutton="true" (ionInput)="onSearchChange($event)" placeholder="search manga"></ion-searchbar>
    <ion-list no-lines *ngFor="let anime of animelist" >   
      <ion-item  >
          <h2>Name : &nbsp; {{anime.t}}</h2>        
      </ion-item>
    </ion-list>

我的.ts文件

getanimelist(){
    //this.isLoaded = true;
    this.restProvider.getpageanimelist().subscribe(data => {
      this.animelist =   data;
      //console.log('result ' + JSON.stringify(data) );
    });
    this.items= this.animelist;
  }


  onSearchChange(evt: any) {
    this.getanimelist();
    const val = evt.srcElement.value;
    console.log(this.items);
    console.log(evt);
    console.log(val);

    if (!val){
     return ;
    }

    this.animelist = this.items.filter((data) => {
       // console.log(data);
       if (data.t && val){
          if (data.t.toLowerCase().indexOf(val.toLowerCase()) > -1){
              return true;
           }
           return false;
       }
    });
  }

我的api调用第二个列表：-

getpageanimelist(){
      return this.http.get(this.apiUrl+'/list/0/?p=0&l=26').pipe(
        map(result => {
          return result['manga'];
        })
      )}

希望有人可以帮助我为什么第二个列表中未显示过滤结果？

Answer 1

我将过滤器数据存储在一个新数组中，而不是存储在animelist数组中（这是从subscribe块中的api获取数据），这导致整个数组再次调用，因此无法查看已过滤的数据

我在.ts中更改的代码

onSearchChange(evt: any) {
  this.getanimelist();
  const val = evt.srcElement.value;
  if (!val){
   return ;
  }
 this.newarray = this.items.filter((data) => { //stored data in new array
    if (data.t && val){
      if (data.t.toLowerCase().indexOf(val.toLowerCase()) > -1){
   return true;
      }
      return false;

    }
  })
}

因此，我在html中调用了新数组，现在当我输入动漫的名称时，列表将得到相应的过滤而没有任何问题。

更改后的HTML

<ion-searchbar class="ion-no-padding" showcancelbutton="true" (ionInput)="onSearchChange($event)" placeholder="search manga"></ion-searchbar>
    <ion-list no-lines *ngFor="let anime of newarray" >   
      <ion-item  >
          <h2>Name : &nbsp; {{anime.t}}</h2>        
      </ion-item>
    </ion-list>

搜索栏（ionInput）事件以过滤输出

1 个答案: