Как использовать эту трубу в angular 5 динамически?

Я использую конвейер в своем приложении angular для фильтрации значений параметров на основе введенных пользователем данных. Этот фильтр используется на уровне поля формы, которая динамически генерируется с использованием цикла 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>

Это дает мне такой результат.

введите здесь описание изображения

Теперь проблема в том, что searchText, назначенный ngmodel, не может использоваться более одного раза, поскольку он ограничен только одним входом, и если я это сделаю, он также повлияет на другие входы.

Как передать [(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);
    });
   }
}

typescript angular angular-pipe angular2-ngmodel
person Talk is Cheap Show me Code    schedule 23.03.2018    source источник
comment
Если вы спросите совета по трубе, может, стоит выложить код указанной трубы ...   -  person    schedule 23.03.2018
comment
Эй, спасибо, что напомнили мне. Мне действительно не хватало этого кода в моем собственном заданном вопросе.   -  person Talk is Cheap Show me Code    schedule 23.03.2018

Ответы (2)


arrow_upward
1
arrow_downward

Проблема, которую вы видите, в основном связана с тем, что все входы 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>
person Community    schedule 23.03.2018

arrow_upward
0
arrow_downward

HTML

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

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])));

  }
}
person Amol Bhor    schedule 23.03.2018