Angular 如何在文本框中键入文本时对表进行动态筛选或客户端筛选

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

问题陈述是： 银行查询应用程序

您需要开发一个单页web应用程序（最好是，但不一定是AngularJS）。 应用程序应该列出并搜索从下面提到的API获取的银行。应该有一个城市下拉列表（在那里只放5个城市），并有一个搜索栏。当我在搜索区域中键入时，应动态筛选表（客户端筛选）。搜索应跨越所有字段

以下是获取银行列表的后端API：

应用程序应具备的基本要素： 显示银行列表的银行搜索屏幕 用户应该能够通过文本在所有字段中搜索银行（重要提示：没有搜索按钮）

我尝试使用此url中描述的过滤器：

但这不能在引导表上实现

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>

---

您可能正在寻找筛选表。

---

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

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

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

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

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

rxjs 5语法（如果需要）：

const searchString$ = this.searchString.valueChanges
  .startWith('') // start it off
  .debounceTime(300) // debounce the user input
  .distinctUntilChanged(); // only emit when it actually 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;
  });

---

嗯，您可能需要使用rxjs 5语法，但这并没有太大区别。唯一的区别是在最后构建流。其他所有内容都是相同的设置错误，代码为“类型未知时筛选器不存在：返回branchs.filter（b=>b.name.includes（searchString））；//无论您的筛选逻辑是什么}您需要正确地键入GetBankBranchs方法，这将根据传递的字段工作。例如，如果我硬编码它来搜索银行名称，但是我可以对所有字段使用过滤器吗？这是一种非常老派的方法，不适合角度上下文。在angular中，不建议直接进行DOM操作。这与问题无关

public nativeBranch$: Observable<any[]>;

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

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

const searchString$ = this.searchString.valueChanges.pipe(
  startWith(''), // start it off
  debounceTime(300), // debounce the user input
  distinctUntilChanged() // only emit when it actually 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;
  })
);

const searchString$ = this.searchString.valueChanges
  .startWith('') // start it off
  .debounceTime(300) // debounce the user input
  .distinctUntilChanged(); // only emit when it actually 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;
  });