angular 6过滤器在界面上不起作用

Question

这里的图片更好理解：

我们看代码

app.component.ts

declare interface MyTypeOne {
  id: number;
  name: string;
}

declare interface MyTypeTwo {
  id: number;
  name: string;
}

declare interface MyTypeThree {

  ofTypeOne: MyTypeOne;
  ofTypeTwo: MyTypeTwo;

}

grd-filter.pipe.ts

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

@Pipe({
  name: 'grdFilter',
  pure:false,
})
export class GrdFilterPipe implements PipeTransform {
  transform(items: any, filter: any, defaultFilter: boolean): any {
    if (!filter){
      return items;
    }

    if (!Array.isArray(items)){
      return items;
    }

    if (filter && Array.isArray(items)) {
      let filterKeys = Object.keys(filter);

      if (defaultFilter) {
        return items.filter(item =>
            filterKeys.reduce((x, keyName) =>
                (x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
      }
      else {
        return items.filter(item => {
          return filterKeys.some((keyName) => {
            return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
          });
        });
      }
    }
  }
}

我的 HTML

 <div class="col">
    <label>list3</label>
    <div class="form-group">
      <input  #searchContact name="some_id"  (click)="onClickMe()" class="select-search" placeholder="search here" [(ngModel)]="searchText3">
      <select multiple [(ngModel)]="selected3" class="form-control">
        <option *ngFor="let item of filteredList3 | grdFilter: {item: searchText3 }" [ngValue]="item">{{ item.ofTypeOne.name + '~' + item.ofTypeTwo.name }}</option>
      </select>
    </div>
  </div>

应用组件内的onMove函数：

  onMove() {
        const compo: MyTypeThree = {ofTypeOne: item1, ofTypeTwo: item2};
              this.list3.push(compo);
        } 

我无法过滤 list3，它是从 list1 和 list2 中选择和移动的项目的组合。

参考图像过滤器不适用于list3。 我们如何过滤list3。

另外两个列表

<div class="row">
  <div class="col">
    <label>list 1</label>
    <div class="form-group">
      <input #searchContact name="some_id" (click)="onClickMe()" class="select-search" placeholder="search here" [(ngModel)]="searchText">
      <select multiple [(ngModel)]="selected1" class="form-control">
        <option *ngFor="let option of list1 | grdFilter: {name: searchText }" [value]="option.id">{{ option.name }}

        </option>
      </select>
    </div>
  </div>
  <div class="col">
    <label>list 2</label>
    <div class="form-group">
      <input #searchContact name="some_id" (click)="onClickMe()" class="select-search" placeholder="search here" [(ngModel)]="searchText2">
      <select multiple [(ngModel)]="selected2" class="form-control">
        <option *ngFor="let option of list2 | grdFilter: {name: searchText2 };let i = index" [value]="option.id">{{ option.name }}

        </option>
      </select>
    </div>
  </div>

Answer 1

试试：

<div class="col">
<label>list3</label>
<div class="form-group">
  <input  name="some_id"  (click)="onClickMe()" class="select-search" placeholder="search here" [(ngModel)]="searchText3">
  <select multiple [(ngModel)]="selected3" class="form-control">
    <option *ngFor="let item of list3 | grdFilter: { 'ofTypeOne.name': searchText3, 'ofTypeTwo.name': searchText3 }" [ngValue]="item">{{ item.ofTypeOne.name + '~' + item.ofTypeTwo.name }}</option>
  </select>
</div>

在您的模板中。

stackblitz example

这应该会让你动起来。我不得不使用句点作为分隔符来挖掘嵌套对象。