多列角10的过滤表数据

Question

我需要根据在keyup事件的输入中设置的值过滤表数据。由于有多个列，因此应相应地显示筛选过的数据。

在我的html中我有下面的内容

             <tr>
             <td *ngFor="let t of tableHeader">
               <input type="text" [id]="t.key" (keyup)="inputChange($event)">
               </td>
            </tr>

我的TS文件如下所示

    public inputChange(value) {
    var prevData = this.dataSource;

    if (this.selectedId == '') {
      prevData = this.result;
    }
    else if (this.selectedId != '' && this.selectedId != value.target.id) {
      prevData = this.result;
    }

     if (this.selectedId != '' && filterValue.target.value == '') {   
       this.result = prevData;
       return;
     }
   
    this.selectedId = value.target.id;
    this.inputValue = value.target.value;

    var filteredData = this.result.filter(x => x[this.selectedId] && x[this.selectedId].toString().toLowerCase().includes(this.inputValue.toLowerCase()));
    this.result = filteredData;
    }

到目前为止，我已经这样做了，并对数据进行了相应的过滤，但是当我从特定的筛选器输入中删除一个值时，它会加载数据源。

预期:显示先前过滤过的数据，而不是数据源。

Answer 1

为了实现这一点，我将使用以下步骤使用rxjs

1. 将datasource定义为Observable

dataSource = [
    {
      firstname: "James",
      lastname: "Amstrong",
      othernames: "Angel",
      age: 35
    },
    {
      firstname: "John",
      lastname: "Peter",
      othernames: "Ava",
      age: 43
    },
...
]

我们将把这个datasource转换成一个使用来自'rxjs'的of可以观察到的

1. 将过滤器定义为Observable

   tableHeader = [
    {
      key: "firstname"
    },
    {
      key: "lastname"
    },
    ...
  ];
 filterKeyValues = this.tableHeader.map(({ key }) => ({ key, value: "" }));
 filterSubject$ = new BehaviorSubject(this.filterKeyValues)
  filter$ = this.filterSubject$.asObservable()

这只会生成一个具有以下结构的Observable

Observable<[{ key: firtname, value: ''}, { key: lastname, value: ''}, ...]>

1. 将两者结合起来，并返回一个新的Observable作为新的过滤数据

dataSource$ = combineLatest([
    this.filter$, of(this.dataSource)
  ]).pipe(
    map(([filter, dataSource]) => 
     dataSource.filter(item => 
        filter.every((value) => 
          (new RegExp(String(value.value).toLowerCase())).test(String(item[value.key]).toLowerCase())
          
        )
      )
    )
  )

1. 定义inputChange的处理程序

  public inputChange(event: any, key) {
    this.filterKeyValues.find(({key: testKey}) => testKey === key).value = event.target.value
    this.filterSubject$.next(this.filterKeyValues)
  }

1. 使用async显示内容

<table>
    <tr>
        <td *ngFor="let t of tableHeader">
            <input type="text" [id]="t.key" (keyup)="inputChange($event, t.key)">
           </td>
    </tr>
  <tr *ngFor="let item of  dataSource$ | async">
    <td>{{ item.firstname }}</td>
    <td>{{ item.lastname }}</td>
    <td>{{ item.othernames }}</td>
    <td>{{ item.age }}</td>
  </tr>
</table>

我们正在调用下一个值。这将强制进行更改检测，而datasorce$ Observable将被重新评估，从而导致UI中的更新。

我制作了一个这里的演示来说明这种方法。