Question

嗨，我想用复选框过滤表时遇到了问题。我对angular还是很陌生，所以即使是最基本的东西也需要帮助。

发生的问题是，当我单击复选框时，它只会过滤整个表格。

这是我的HTML：

x86-64

这是我的烟斗：

     <form >
<input  type="checkbox"  name="reefer" [(ngModel)]="searchString" >reefer<br>
</form>

<!-- Container For Sale Table -->
 <table mdbTable>
  <thead>
    <tr>
      <th *ngFor="let head of headElements" scope="col">{{head}} </th>
    </tr>
  </thead>
  <tbody>
    <tr mdbTableCol *ngFor="let c of characters | filter: {CID: searchString, Company:searchString,  Size: searchString, Type:searchString}; let i=index;">
      <th scope="row">{{c.CID}}</th>
      <td scope="row">{{c.Company}}</td>
      <td scope="row">{{c.Size}}</td>
      <td scope="row">{{c.Type}}</td>
    </tr>
  </tbody>
</table>

这是该组件的TS文件：

import { Pipe, PipeTransform, Injectable } from '@angular/core';

@Pipe({
  name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
  transform(items: any, filter: any, defaultFilter: boolean): any {
    if (!filter){
      return items;
    }

    if (!Array.isArray(items)){
      return items;
    }

    if (filter && Array.isArray(items)) {
      let filterKeys = Object.keys(filter);

      if (defaultFilter) {
        return items.filter(item =>
            filterKeys.reduce((x, keyName) =>
                (x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
      }
      else {
        return items.filter(item => {
          return filterKeys.some((keyName) => {
            return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
          });
        });
      }
    }
  }
}

我尝试替换NgModel中的值。我尝试更改输入的值。我尝试更改输入的“名称”值，即使我不确定该值是什么。

提前谢谢

使用复选框使用管道过滤为表格

0 个答案: