Question

我正在尝试过滤离子4应用程序中的结果。我有一个离子列表，该列表显示了在ngOnInit中设置的可观察结果。我在页面上还有一个搜索栏，它调用搜索功能。我可以捕获输入并且它正在传递输入，但是它看起来好像不是正在过滤或可能未更新离子列表。

我尝试了搜索功能和过滤器功能的多次迭代，但没有结果。我已经使用（ionchanged）和（ionInput）进行了尝试，目前我正在console.log输入输入，并且可以运行，但是ion-list从未更新。

HTML文件

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Hospitals</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar (ionInput)="searchChanged($event)"></ion-searchbar>
  <ion-list *ngIf="results">
    <ion-item button *ngFor="let item of (results | async)" routerDirection="forward" [routerLink]="['/hospital-details/'+ item.id]">
      <ion-label text-wrap>
        <h3>{{ item.name }}</h3>
      </ion-label>
    </ion-item>
  </ion-list>

</ion-content>

ts文件

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Routes, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { GetHospitalsService } from '../../services/get-hospitals.service';
import { SearchPipe } from './../../search.pipe';
import {filter, map} from 'rxjs/operators';


@Component({
  selector: 'app-hospitals',
  templateUrl: './hospitals.page.html',
  styleUrls: ['./hospitals.page.scss'],
})
export class HospitalsPage implements OnInit {

  // information = null;
  hospitals = null;
  searchTerm = '';

  results: Observable<any>;
  information: Observable<any>;


  constructor(private activatedRoute: ActivatedRoute, private hospitalService: GetHospitalsService, private router: Router) { }
  ngOnInit() {
    console.log('Hospitals enter');

    this.results = this.hospitalService.getHospitals1();
    this.information = this.filterArr2(this.searchTerm);

  }
  filterArr2(search): Observable<any> {
    console.log('enter the filterArr2');
    console.log('this.results', this.results);
    return this.results.pipe(
          // map(oneObj => oneObj.name.toLowerCase().indexOf(search) > -1)
          map(data => data.filter(data.name.toLowerCase().indexOf(search) > -1))
      );
  }

  searchChanged($event) {
    console.log('search changed entered');
    this.searchTerm = $event.target.value;
    console.log('search term passed', this.searchTerm);
    const mySearch = this.searchTerm.toLowerCase();
    console.log('search lower', mySearch);
    this.information = this.filterArr2(mySearch);
  }


}

我希望它返回过滤后的可观察值并更新结果，但是可惜没有。结果保持不变。

Answer 1

诀窍在于您设置

var mapTapHoldTimeout ;

map.on('touchstart', function() {
   mapTapHoldTimeout = setTimeout(function(){ alert('Touched for 500ms'), 500);
});

//clear interval on touchend or touchmove (or you can calculate distance on touchmove to keep some tolerance)
map.on('touchend,touchmove', function() {
   if ( mapTapHoldTimeout ) {
      clearTimeout(mapTapHoldTimeout );
   }
});

在您的

  this.results = this.hospitalService.getHospitals1();

中

。这是一次性设置，Observable将启动（由于HTML中的ngOnInit async），检索数据并完成。然后它将不再处于活动状态。

如果您要刷新或将单独的参数传递给API进行检索（就像进行搜索一样），则需要将pipe变量重置为新的Observable才能检索数据并完成操作。

由于您已经在使用this.results，因此您无需重新绑定或切换到另一个可抛弃的Observable，即可伪造恒定的数据流；相反，AsyncPipe将在重新绑定后切换到新的Observable。

因此，如果您在组件中为AsyncPipe创建一个函数，请在该函数中执行以下操作：

retrieveHospitals()

并从您的组件或HTML中调用该函数，它将检索一个新列表并显示该列表。

希望我对此有所帮助。

操纵离子4后如何刷新可观察物

1 个答案: