Angular 7:使用异步管道过滤多个键的搜索结果

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

@Component({
  selector: 'app-search',
  template: `
    <input type="text" (input)="search($event.target.value)" placeholder="Search">
    <ul>
      <li *ngFor="let result of filteredResults$ | async">{{ result }}</li>
    </ul>
  `
})
export class SearchComponent {
  searchTerms = new Subject<string>();
  filteredResults$ = this.searchTerms.pipe(
    // 在这里添加异步管道的逻辑
  );

  search(term: string): void {
    this.searchTerms.next(term);
  }
}

import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-search',
  template: `
    <input type="text" (input)="search($event.target.value)" placeholder="Search">
    <ul>
      <li *ngFor="let result of filteredResults$ | async">{{ result }}</li>
    </ul>
  `
})
export class SearchComponent {
  searchTerms = new Subject<string>();
  filteredResults$ = this.searchTerms.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(term => this.filterResults(term))
  );

  search(term: string): void {
    this.searchTerms.next(term);
  }

  filterResults(term: string): Observable<string[]> {
    // 在这里添加过滤搜索结果的逻辑
  }
}

import { Component } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-search',
  template: `
    <input type="text" (input)="search($event.target.value)" placeholder="Search">
    <ul>
      <li *ngFor="let result of filteredResults$ | async">{{ result }}</li>
    </ul>
  `
})
export class SearchComponent {
  searchTerms = new Subject<string>();
  filteredResults$ = this.searchTerms.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(term => this.filterResults(term))
  );

  search(term: string): void {
    this.searchTerms.next(term);
  }

  filterResults(term: string): Observable<string[]> {
    // 在这里添加过滤搜索结果的逻辑
    const results: string[] = [];

    // 假设这是你的搜索结果数据源
    const searchResults: string[] = [
      'Apple',
      'Banana',
      'Orange',
      'Pineapple',
      'Grapes'
    ];

    // 根据多个键来过滤搜索结果
    for (const searchResult of searchResults) {
      if (searchResult.toLowerCase().includes(term.toLowerCase())) {
        results.push(searchResult);
      }
    }

    return of(results);
  }
}