Question

我正在开发一个项目，其中我有一个页面，其ngFor显示一个对象数组。我想让用户能够通过在输入字段中键入某些关键字来过滤这些对象。

数据的过滤必须在服务器端完成，所以我在我的服务中实现了对此的调用。

public searchProperties(query: string): Observable<IProperty[]> {
    console.log('SERVICE: query: ' + query);
    let params = new HttpParams();

    params = params.append('q', query);

    return this.http.get<IProperty[]>(this.baseUrl+'/api/property', {params: params})
    .do( response => {
      console.log('Successfully retrieved the search response');
    }).catch((error: HttpErrorResponse) => {
      console.log('Something went wrong while retrieving the search response');
      return Observable.throw(error);
    })
  }

我在这样的管道中调用此方法：

  transform(items: IProperty[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;

    console.log('PIPE: Amount of items in items array BEFORE: ' + items.length);

    this.propertyService.searchProperties(searchText).subscribe(
      result => {
        items = result;
      }, error => {
        console.log('Failed to retrieve the properties that were searched for');
        return items;
      },
      () => {
        console.log('PIPE: Amount of items in items array AFTER: ' + items.length);
        return items;
      }
    )
  }

我在html中将管道添加到我的ngFor中，如下所示：

 <div class="col-md-4" *ngFor="let property of properties | property_filter : searchText ; let i=index">

我目前的代码存在两个问题：

每当我在输入字段中键入一些关键字时，http调用就会被调用并返回对管道的响应，但是我的页面没有显示任何对象，ngFor只保持空白，直到我再次清除输入字段。
键入时，HTTP调用应该每200毫秒触发一次而不是每次更改事件。

提前致谢！

更新

我删除了管道并在组件中实现了调用。现在可以正确更新对象列表。

唯一仍然存在的问题是如何将响应量限制为每200毫秒一次？

Answer 1

对于您在某一秒后更改后的触发事件，您可以使用RxJ的debounceTime函数，如下所示。

<input type="text" [ngModel]="term" (ngModelChange)="change($event)"/>

import { Subject } from 'rxjs/Subject';
import { Component }   from '@angular/core';
import 'rxjs/add/operator/debounceTime';

export class AppComponent{
    term: string;
    modelChanged: Subject<string> = new Subject<string>();

    constructor() {
        this.modelChanged
       .debounceTime(300) // wait 300ms after the last event before emitting last event
       .distinctUntilChanged() // only emit if value is different from previous value
       .subscribe(model => this.model = model);
    }

    change(text: string) {
        this.modelChanged.next(text);
       //code for filtering goes here 
    }
}


____

以下是我的代码，我用它来过滤来自服务器的电子邮件地址并且工作正常

Pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { ReportService } from './ReportService';
import { Observable } from 'rxjs/Observable';

@Pipe({
  name: 'filter'
})

export class MyFilter implements PipeTransform {
  emails: Array<string>= new Array<string>();
  constructor(private reportservice :ReportService)
  {}

    transform(items: any[], term: string): any {
      debugger;
      if (!term) 
        return items;
       this.reportservice.GetAllEmails().subscribe(e=> this.emails = e);
       return this.emails.filter(item => item.indexOf(term) > -1);
    }
}

App.Component.Html

<form id="filter">
  <label>Searching for email</label>
  <input type="text" name="termtext" [(ngModel)]="term" />
</form>

<ul *ngFor="let email of emails| filter:term">
    {{email}}
</ul>

App.component.ts

  term:string;
  emails: Array<string> = new Array<string>();
  constructor()
  {
    this.term="test";
  }

第一次从服务中获取数据需要时间，但下次工作时很好。

Angular 4 - 在过滤时将HTTP请求限制为每200毫秒一个

1 个答案: