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

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">

我当前的代码有两个问题:

1. 每当我在输入字段中键入一些关键字时，http 调用就会被调用并返回对管道的响应，但我的页面没有显示任何对象，ngFor 只是保持为空，直到我再次清除输入字段。

2. 在键入时，HTTP 调用应该仅每 200 毫秒触发一次，而不是在每次更改事件时触发。

提前致谢!

更新:

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

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

Answer 1

在您使用 debounceTime 后的某一秒后更改后触发事件RxJs的功能如下。

<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 
    }
}


____

---

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

管道.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>

应用程序组件.ts

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

第一次从服务中获取数据需要时间，但下次它可以正常工作。