以角度搜索输入字段? [英] search input field in angular?

问题描述

这里我有 folderObjs 数组，这个数组的控制台在下面的代码中，我放置了搜索输入字段，我想通过文件夹名称和文件夹大小以角度搜索这个数组怎么可能?

<块引用>

HTML

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search"></mat-form-field><div *ngFor="let 文件夹的folderObjs"><span>{{folder.folderName}}</span><span>{{folder.folderSize}}</span>

<块引用>

TS

folderObjs : Folder[] = [];应用过滤器(过滤器值){控制台日志(this.folderObjs)；//0: {folderid: 781, folderName: "pelu folder",folderActivity: "true", ...}1: {folderid: 782, folderName: "biju folder", folderActivity: "true", ...}过滤器:d"长度:2this.folderObjs.filter = filterValue.trim().toLowerCase();}

解决方案

创建自定义管道

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';@管道({名称:'过滤器'})导出类 FilterPipe 实现 PipeTransform {变换(值:任何，searchValue):任何{if (!searchValue) 返回值；返回值.filter((v) =>v.name.toLowerCase().indexOf(searchValue.toLowerCase()) >-1 ||v.size.toLowerCase().indexOf(searchValue.toLowerCase()) >-1)}}

component.ts

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

<div *ngIf="(folderObjs | filter:search).length <1">未找到

示例:https://stackblitz.com/edit/angular-mrgzw3

Here I have folderObjs array and Console of this array is in below code, I put search input field and I want to make search for this array by folderName and folderSize in angular how it is possible?

HTML

<mat-form-field>
 <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>

<div *ngFor="let folder of folderObjs">
  <span>{{folder.folderName}}</span>
  <span>{{folder.folderSize}}</span>
</div>

TS

folderObjs : Folder[] = [];

applyFilter(filterValue) {
  console.log(this.folderObjs);
// 0: {folderid: 781, folderName: "pelu folder",folderActivity: "true", …}
   1: {folderid: 782, folderName: "biju folder", folderActivity: "true", …}
   filter: "d"
   length: 2

  this.folderObjs.filter = filterValue.trim().toLowerCase();
}

解决方案

Create custom pipe

filter.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)

  }

}

component.ts

<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>

Example:https://stackblitz.com/edit/angular-mrgzw3

这篇关于以角度搜索输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！