Question

我需要完成一项作业。当在文本框中输入文本时，分配应使用客户端数据过滤。如何实施。以下是作业的问题说明

问题陈述是：银行搜索应用程序

您需要开发一个单页Web应用程序（最好但不一定在AngularJS中开发）。该应用程序应列出并搜索从下面提到的API获取的银行。应该有一个城市下拉菜单（仅在其中放置5个城市），并且有一个搜索栏。当我在搜索区域中键入内容时，应该对表进行动态过滤（客户端过滤）。搜索应跨所有字段。

这是获取银行列表的后端API：https://vast-shore-74260.herokuapp.com/banks?city=MUMBAI

您的应用程序应具有的必需品：银行搜索屏幕，其中会显示银行列表用户应该能够在所有字段中按文本搜索银行（重要：没有搜索按钮）

我尝试使用此网址中所述的过滤器：https://codeburst.io/create-a-search-pipe-to-dynamically-filter-results-with-angular-4-21fd3a5bec5c

但这不能在引导表上实现

home.component.ts

import { Component, OnInit } from '@angular/core';
import { BankhttpService } from '../bankhttp.service';

@Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
   public searchString: string;  
   public nativeBranch;

   constructor(public bankHttpService : BankhttpService) {
      console.log('Home component constructor is called');
   }


   ngOnInit() {
      console.log('Home component onIniti called');

      this.bankHttpService.getBankBranches().subscribe(
         data=>{
            console.log('logging data');
            console.log(data);
            this.nativeBranch = data;
            console.log(this.nativeBranch)
         },
         error=>{
            console.log('Some error occured');
            console.log(error.errorMessage);
         }
      )
   }
}

home.component.html

<div class="container">
  <div class="row">
    <br>


    <div class="col-md-4">
      <form>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon">
              <i class="glyphicon glyphicon-search"></i>
            </div>
            <input type="text" class="form-control" name="searchString" placeholder="Type to search..."
              [(ngModel)]="searchString" />
          </div>
        </div>
      </form>
    </div>
    <div class="col">

      <div class="table-responsive">

        <table class="table  table-striped css-serial">
          <thead>
            <tr>
              <th scope="col">Sl.No.</th>
              <th scope="col">City</th>
              <th scope="col">Bank Name</th>
              <th scope="col">IFSC</th>
              <th scope="col">Branch</th>
              <th class="w-15" scope="col">Bank ID</th>
              <th scope="col">District</th>
              <th scope="col">State</th>
              <th class="w-15" scope="col">Address</th>
            </tr>
          </thead>
          <tbody>
            <tr style="align-self: center" *ngFor="let native of nativeBranch | filter : 'name' : 
searchString; let i = index">
              <td> </td>
              <td>{{native.city}}</td>
              <td>{{native.bank_name}}</td>
              <td>{{native.ifsc}}</td>
              <td>{{native.branch}}</td>
              <td>{{native.bank_id}}</td>
              <td>{{native.district}}</td>
              <td>{{native.state}}</td>
              <td>{{native.address}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

作为服务组件的共享模块 bankhttpservice

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
import { HttpErrorResponse, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';

@Injectable({
  providedIn: 'root'
})
export class BankhttpService {
  private baseUrl = "https://vast-shore-74260.herokuapp.com/banks";
  public myCity = "MUMBAI"

  constructor(private _http: HttpClient) {
    console.log('Bank http service called');
  }

  private handleError(err: HttpErrorResponse) {
    console.log('Handle http error');
    console.log(err.message);
    return Observable.throw(err.message);
  }


  public getBankBranches(): any {
    let myResponse = this._http.get(this.baseUrl + '?city=' +
      this.myCity);
    console.log(myResponse);
    return myResponse;
  }
}

Answer 1

可能您正在寻找过滤器表。 https://www.w3schools.com/howto/howto_js_filter_table.asp

Answer 2

这是一个非常经典的可观察用例。...

首先，将您的搜索字符串转换为表单控件：

public searchString: FormControl<string> = new FormControl('');  

<input type="text" class="form-control" name="searchString" placeholder="Type to search..."
              [formControl]="searchString" />

下一步，将nativeBranch变成可观察的并使用异步管道，并摆脱性能危害过滤器管道：

public nativeBranch$: Observable<any[]>;

this.nativeBranch$ = this.bankHttpService.getBankBranches();

<tr style="align-self: center" *ngFor="let native of nativeBranch$ | async; let i = index">

最后，将您的表单控件valueChanges可观察到和nativeBranch $可观察结合以过滤结果：

const searchString$ = this.searchString.valueChanges.pipe(
  startWith(''), // start it off
  debounceTime(300), // debounce the user input
  distinctUntilChanged() // only emit when it acctually changes
);
this.nativeBranch$ = combineLatest(this.bankHttpService.getBankBranches(), 
                                   searchString$).pipe(
  map(([branches, searchString]) => {
    if (searchString) {
      return branches.filter(b => b.name.includes(searchString)); // whatever your filter logic is
    }
    return branches;
  })
);

现在您有了一个高性能，可微调的过滤表

rxjs 5语法（如果需要）

const searchString$ = this.searchString.valueChanges
  .startWith('') // start it off
  .debounceTime(300) // debounce the user input
  .distinctUntilChanged(); // only emit when it acctually changes

this.nativeBranch$ = Observable.combineLatest(this.bankHttpService.getBankBranches(), 
                                   searchString$)
  .map(([branches, searchString]) => {
    if (searchString) {
      return branches.filter(b => b.name.includes(searchString)); // whatever your filter logic is
    }
    return branches;
  });

在文本框中键入文本时，如何对表进行动态过滤或客户端过滤

2 个答案: