Question

我在角度应用程序中使用管道来根据用户给出的搜索输入过滤选项值。此过滤器用于表单的字段级别，该表单使用ngFor循环和基于json响应动态生成。

我能够使用管道概念来过滤独立单输入的值，但是当我使用Ngfor Loop多次使用它时，如下面的代码，它不能完美地工作。

 // formdata is coming as of json response from a http request
<div *ngFor="let input1 of formdata.formfields">   


 <mat-select placeholder="Select something" [formControlName]="input1.field_name">
               <ngx-mat-select-search [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}" placeholder="Select {{input1.title}}"></ngx-mat-select-search>

                // here I am using 'fitleroptions' pipe after ngFor and passing searchText ngmodel input binding  

             <mat-option *ngFor="let opt_value of input1.enumNameGroups |  filteroptions : searchText; let i = index" value={{input1.value}}>{{opt_value}}</mat-option>
       </mat-select>

    // other input types like file, text etc....

</div>

这给了我这样的输出。

现在问题是分配给ngmodel的searchText不能再使用一次，因为它只限于一个输入，如果我这样做，它也会影响其他输入。

如何传递[（ngmodel）] =“some_variable”，然后将其分配给filteroptions：“some_variable”，以便它们仅限于一个选择输入???

所以问题也可以表示为如何传递动态ngmodel名称并将该名称分配给管道参数？

这是我正在使用的filteroptions管道。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filteroptions'
})
export class FilterOptionsPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {

        console.log("got item array here",items);
     return it.toLowerCase().includes(searchText);
    });
   }
}

Answer 1

您所看到的问题基本上是由于所有ngx-mat-select-search输入被双向绑定到同一字段searchText。您可以通过为过滤器引入模板变量轻松解决此问题。

<ngx-mat-select-search ngModel #filter="ngModel" [ngModelOptions]="{standalone: true}" placeholder="Select {{input1.title}}"></ngx-mat-select-search>
<mat-option *ngFor="let opt_value of input1.enumNameGroups |  filteroptions : filter.value; let i = index" value={{input1.value}}>{{opt_value}}</mat-option>

Answer 2

<mat-select 
 placeholder="Owner" 
 [(ngModel)]="criteriaOwner" 
 name="ownerId" 
 required>
 <ngx-mat-select-search ngModel 
    #filter="ngModel" 
    [ngModelOptions]="{standalone: true}" 
    [placeholderLabel]="'Find owner...'" 
    [noEntriesFoundLabel]="'No matching owner found'" >
 </ngx-mat-select-search>
    <mat-option *ngFor="let item of criteriaOwners | filterByProperty: 
      ['name',filter.value]; let i = index" [value]="item">
        <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
            <div>
                {{item.name}}
            </div>
        </div>
    </mat-option>
</mat-select>

/*Write pipe like below.*/

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

@Pipe({
  name: 'filterByProperty'
})
export class FilterByPropertyPipe implements PipeTransform {

  transform(list: any[], args?: any): any {
    if (!list || !args) {
      return list;
    }

    var columnName = args[0];
    var columnValue = args[1];

    return list.filter(listItem => ('' + listItem[columnName]).toLocaleLowerCase().indexOf(columnValue.toString().toLocaleLowerCase()) !== -1);
  }

}

Answer 3

HTML

＆＃13;

<input [(ngModel)]="searchText">
<div *ngFor="let item of items | searchFilter:'id,name':searchText">{{item.name}}</div>

＆＃13;

pipeFilter.ts

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

@Pipe({
  name: 'searchFilter'
})

export class SearchFilterPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter(x => keys.split(',').some(key => x.hasOwnProperty(key) && new RegExp(term, 'gi').test(x[key])));

  }
}

如何在角度5中动态使用此管道？

3 个答案: