Angular 搜索输入字段的角度？

这里我有

folderObjs

数组，这个数组的控制台在下面的代码中，我把搜索输入字段放进去，我想通过folderName和folderSize搜索这个数组，这是怎么可能的

HTML

上面的代码将过滤基于数据的名称属性

applyFilter(filterValue, filterBy) {
 folderObjs.filter((val) => {
    return val[filterBy].toLowerCase().indexOf(filterValue) > -1;
 });
}

---

也可以通过filterBy选项，希望这有助于

理想情况下，您可以使用管道或filter（）来实现这一点

sortedArray : Folder[] = [];  

applyFilter(val: string) {

  this.sortedArray = this.folderObjs.filter(x =>
    x.folderName.toLowerCase().indexOf(val.trim().toLowerCase()) !== -1 || 
    x.folderSize.toLowerCase().indexOf(val.trim().toLowerCase()) !== -1)
}

---

这将起作用，首先将folderObjs的副本复制到folderObjCopy，因为当搜索值为空时，我们必须重新填充所有值

applyFilter(filterValue) {
 let val = filterValue.toLowerCase();
 let searchColumns = ['folderName','folderSize'];
 if (val.length > 0) {
 this.folderObjs = this.folderObjCopy.filter(function (d) {
          let matchFound = false;
          for (let data of search_columns) {
            let value = "" + d[data];
            if (value.toLowerCase().indexOf(val) !== -1 || !val) {
              matchFound = true;
              break;
            }
          }
          return matchFound;
        });
 } else {
        this.folderObjs = this.folderObjCopy;
   }
 }

注意：将会有更多优化的解决方案，这只是我的实现。如果这不起作用，请告诉我

创建自定义管道

过滤器.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(value: any, searchValue): any {
    if (!searchValue) return value;
    return value.filter((v) => 
    v.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1 || 
    v.size.toLowerCase().indexOf(searchValue.toLowerCase()) > -1)

  }

}

<input type="search"  [(ngModel)]="search">

<div *ngFor="let f of (folderObjs | filter:search)as folder">
  {{f.name}}
  {{f.size}}    
</div>

<div *ngIf="(folderObjs | filter:search).length <1">
  Not Found
  </div>

组件。ts

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(value: any, searchValue): any {
    if (!searchValue) return value;
    return value.filter((v) => 
    v.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1 || 
    v.size.toLowerCase().indexOf(searchValue.toLowerCase()) > -1)

  }

}

<input type="search"  [(ngModel)]="search">

<div *ngFor="let f of (folderObjs | filter:search)as folder">
  {{f.name}}
  {{f.size}}    
</div>

<div *ngIf="(folderObjs | filter:search).length <1">
  Not Found
  </div>

{{f.name}
{{f.size}}
找不到

---

示例：

如何从用户处获取FolderSize输入？上面没有看到。@SameerAhmad看到我编辑的问题可能与“我得到搜索”值重复，但如何隐藏其他文件夹使用*ngFor中的SorterDarray可以隐藏其他文件夹我得到筛选数组，但如何隐藏其他文件夹arrays@Ankit如果您希望以干净的方式执行此操作，请根据我的代码创建一个过滤管道，应用管道前面的管道将返回过滤元素，dom将相应地更新列表，如果您需要帮助创建过滤管道，我将帮助您无法找到管道“过滤器”我在HTMLY中遇到此类型错误您需要在app.module声明数组中包含过滤管道

<input type="search"  [(ngModel)]="search">

<div *ngFor="let f of (folderObjs | filter:search)as folder">
  {{f.name}}
  {{f.size}}    
</div>

<div *ngIf="(folderObjs | filter:search).length <1">
  Not Found
  </div>