поиск поля ввода в угловых?

Question

Здесь у меня есть массив folderObjs, и консоль этого массива находится в приведенном ниже коде, я поставил поле ввода поиска и хочу выполнить поиск этого массива с помощьюимя_папки и размер_папки в угловых, как это возможно?

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();
}

Answer 1

Создать пользовательский канал

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>

Пример: https://stackblitz.com/edit/angular-mrgzw3

Answer 2

В идеале вы можете использовать либо трубы, либо фильтр () для достижения этой цели.

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

Answer 3

Это будет работать, сначала возьмите копию папкиObjs в 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;
   }
 }

Примечание : Будет гораздо больше оптимизированных решений, это только мои реализации.Пожалуйста, дайте мне знать, если это не сработает

Answer 4

const folderObjs = [
    {name: "Jane", lastName: "Doe"},
    {name: "john", lastName: "Snow"},
    {name: "Tyrion", lastName: "Lannister"},
    {name: "Lorem", lastName: "Ipsum"},
]

applyFilter(filterValue) {
 folderObjs.filter((val) => {
    return val.name.toLowerCase().indexOf(filterValue) > -1;
 });
}

код выше будет фильтровать свойство имени на основе данных.

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

Может также передавать параметр filterBy, надеюсь, это поможет