如何对 angular 中的现有列表实施搜索过滤器 2

Question

下面是我的HTML

<ul style="list-style: none;" class="list-unstyled" xmlns:list-style-type="http://www.w3.org/1999/xhtml">
  <li *ngFor="let t of acquirer_response | keys">
    <ul class="list-unstyled"  class="list-group" >
      <li *ngFor="let b of t.value | keys ">
        <ul class="list-unstyled" style ="list-style-type: none" >
          <strong (click)="t.isCollapsedContent =!t.isCollapsedContent" (click)=" toggleSign(sign)" ><span class="glyphicon glyphicon-{{sign}}-sign"></span> {{b.key}}</strong>
          <div *ngIf="t.isCollapsedContent">
            <li *ngFor="let c of b.value | keys ">
              <div *ngIf="c.key == 'request'"  style="border: none">
                <ul  style="list-style: none;" class="list-unstyled"   class="list-group-item list-group-item-info" style="border: none">
                  <strong  class="list-group-item list-group-item-info"  (click)="c.value.isCollapsedContent =!c.value.isCollapsedContent">
                    <span class="glyphicon glyphicon-{{sign}}-sign"  (click)=" toggleSign(sign)"  ></span>{{c.key}}
                  </strong>
                  <li  class="list-unstyled" *ngIf="c.value.isCollapsedContent" class="list-group-item list-group-item-info">
                    <table id="user" class="table table-bordered table-striped table-condensed" style = "overflow: hidden;" width="100%" >
                      <thead>
                      <tr>
                       <th>Field</th>
                        <th>Length</th>
                        <th>Value</th>
                      </tr>
                      </thead>
                      <tr *ngFor="let d of c.value | keys" class="list-group-item-info">

                        <td nowrap=" ">{{d.value.Field}}</td>
                        <td>{{d.value.length}}</td>
                        <td style="word-wrap: break-word;min-width: 160px;max-width: 160px; white-space:normal">{{d.value.value}}</td>
                      </tr>
                    </table>
                  </li>
                </ul>
              </div>
              <div *ngIf="c.key == 'response'">
                <ul style="list-style: none;" class="list-unstyled"   class="list-group-item list-group-item-info" style="border: none">
                  <strong  class="list-group-item list-group-item-info"  (click)="c.value.isCollapsedContent =!c.value.isCollapsedContent"  (click)=" toggleSign(sign)" >
                    <span class="glyphicon glyphicon-{{sign}}-sign" ></span>{{c.key}}
                  </strong>
                  <li  class="list-unstyled" *ngIf="c.value.isCollapsedContent" class="list-group-item list-group-item-info">
                    <table datatable="ng" class="table table-bordered table-striped table-condensed">
                      <thead>
                      <tr>
                        <th>Field</th>
                        <th>Length</th>
                        <th>Value</th>
                      </tr>
                      </thead>
                      <tr *ngFor="let d of c.value | keys" class="list-group-item-info">
                        <td>{{d.value.Field}}</td>
                        <td>{{d.value.length}}</td>
                        <td>{{d.value.value}}</td>
                      </tr>
                    </table>
                  </li>
                </ul>
              </div>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </li>
</ul>

成分如下

import { NgModule,Input } from '@angular/core';
import { Component ,OnInit} from '@angular/core';
import {AcquirerService} from '../services/acquirer.service'
import { Pipe, PipeTransform } from '@angular/core';
import {Collapse} from './collapse.component';



@Component({

  selector : 'acquirer-message',
  templateUrl: '../templates/acquirer.component.html',
//  template : '<parent-view [txn] = "acquirer_response"></parent-view>' ,

  providers :[AcquirerService]
})

@NgModule({
  declarations: [Collapse]
})
export class AcquirerComponent implements  OnInit {

  public isCollapsedContent:boolean = false;

  acquirer_response : any[];

  constructor(private _acquirerService:AcquirerService) {

  }

  ngOnInit() {

    this._acquirerService.getAcquirer()
      .subscribe(resAcquirerData => {

        this.acquirer_response = resAcquirerData.transactions

        console.log(this.acquirer_response);
        // console.log(this.acquirer_response.transactions);
    });


  }

  sign = 'plus';  // or minus if you want that first

  toggleSign(value :string) {
    this.sign = value;
    if(this.sign == 'plus') {
      this.sign = 'minus';
    } else {
      this.sign = 'plus';
    }
  }


}

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {

  transform(value) {
    let keys:any = [];
    for (let key in value) {

      keys.push( {key: key, value: value[key]} );
      console.log("value of key :"+key ,"value :"+ value);
    }
    return keys;

  }

}

结果如预期的那样漂亮的树视图如下

 Transaction ref : 321916010424
     request
     response
 Transaction ref : 000463000046
     request
     response

现在我想在我的搜索框中实现 search/filter 如果我输入 321916010424 它应该显示记录（匹配记录如下）

Transaction ref : 321916010424
         request
         response

我知道它必须使用管道来完成，但不知道如何实现或我应该采取什么方法，我是否应该能够使用组件中的现有管道，如果是的话，如何实现我是 angular 2 或开发的新手。任何帮助将不胜感激

我的 json 数据看起来像这样

{
    "transactions": [{
        "Transaction ref : 321916010424": {
            "request": [{
                "Field": "DE-000",
                "length": "004",
                "value": "0100"
            }, {
                "Field": "DE-001",
                "length": "016",
                "value": "11110010 00111100 01000100 10000001 10001000 11100001 10000000 00001000                       00000000 00000000 00000000 00000000 00000000 00000000 00000001 11000000 "
            }],
            "response": [{
                "Field": "DE-000",
                "length": "004",
                "value": "0110"
            }, {
                "Field": "DE-001",
                "length": "008",
                "value": "00110010 00111010 00000000 00000000 00001110 11000001 10000000 00000010 "
            }, {
                "Field": "DE-003",
                "length": "006",
                "value": "003000"
            }]
        }
    }, {
        "Transaction ref : 000463000046": {
            "request": [{
                "Field": "DE-000",
                "length": "004",
                "value": "0100"
            }, {
                "Field": "DE-001",
                "length": "016",
                "value": "11110010 00111100 01000100 10000001 10101000 11100001 10000010 00001000                       00000000 00000000 00000000 00000000 00000000 00000000 00000001 00000000 "
            }],
            "response": [{
                "Field": "DE-000",
                "length": "004",
                "value": "0110"
            }, {
                "Field": "DE-001",
                "length": "008",
                "value": "00110010 00111010 00000000 00000000 00001110 11000001 10000000 00000010 "
            }, {
                "Field": "DE-063",
                "length": "009",
                "value": "AMXHZGWJ7"
            }]
        }
    }]
}

Answer 1

我实现如下创建一个搜索过滤器并传递参数，如果参数匹配，它将进行搜索下面是我的搜索管道

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



@Pipe({name: 'Searchkeys'})
export class AcquirerTxnSearchPipe implements PipeTransform {

  transform(items, args:string) {

    let ans:any = [];
    // console.log("iam herer "+items);
    let result:any = [];
    let kvalue:any = [];


    if (args !== undefined) {
       console.log("value of args in loop condition-->" + args)

      for (let k in items) {

        kvalue = items[k];

        for (let a in kvalue) {
          if (a.substr(18).startsWith(args)) {
            ans.push({key: k, value: items[k]});

           console.log("mathced txn ==>" + ans)
            result = ans;
          }
        }
      }
    }

    else {

      console.log("value of args no undefined--->" + args);
      for (let k in items) {


        console.log("value of a --->"+ k)
        ans.push({key: k, value: items[k]});

        result = ans;

      }
    }


    return result;

  }

}

我的另一个管道将加载所有详细信息

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


@Pipe({name: 'keys'})
export class AcquirerTxnPipe implements PipeTransform {

  transform(value) {
    let keys:any = [];
    for (let key in value) {

      keys.push( {key: key, value: value[key]} );
      console.log("value of key :"+key ,"value :"+ value);
    }
    return keys;

  }

}

所以在 HTML 中我调用了搜索管道来过滤感兴趣的记录，如果搜索框中有输入如果匹配则 select 记录并将其传递到普通管道加载下面的其余数据是 html

<div id="search-component">
  <h4>Transaction Search</h4>
  <input #searchBox id="search-box" [(ngModel)]="queryString"  placeholder="Search to type" />
  <p>&nbsp;</p>

  <div>
    <ul style="list-style: none;" class="list-unstyled" xmlns:list-style-type="http://www.w3.org/1999/xhtml">
      <li *ngFor="let t of searchacquirer_response | Searchkeys :queryString ">
        <ul class="list-unstyled"  class="list-group" >
          <li *ngFor="let b of t.value | keys" style="list-style-type: none;">
            <ul class="list-unstyled" style ="list-style-type: none" >
              <strong (click)="t.isCollapsedContent =!t.isCollapsedContent" (click)=" toggleSign(sign)" ><span class="glyphicon glyphicon-{{sign}}-sign"></span> {{b.key}}</strong>
              <div *ngIf="t.isCollapsedContent">
                <li *ngFor="let c of b.value | keys ">
                  <div *ngIf="c.key == 'request'"  style="border: none">
                    <ul  style="list-style: none;" class="list-unstyled"   class="list-group-item list-group-item-info" style="border: none">
                      <strong  class="list-group-item list-group-item-info"  (click)="c.value.isCollapsedContent =!c.value.isCollapsedContent">
                        <span class="glyphicon glyphicon-{{sign}}-sign"  (click)=" toggleSign(sign)"  ></span>{{c.key}}
                      </strong>
                      <li  class="list-unstyled" *ngIf="c.value.isCollapsedContent" class="list-group-item list-group-item-info">
                        <table id="user" class="table table-bordered table-striped table-condensed" style = "overflow: hidden;" width="100%" >
                          <thead>
                          <tr>
                            <th>Field</th>
                            <th>Length</th>
                            <th>Value</th>
                          </tr>
                          </thead>
                          <tr *ngFor="let d of c.value | keys" class="list-group-item-info">

                            <td nowrap=" ">{{d.value.Field}}</td>
                            <td>{{d.value.length}}</td>
                            <td style="word-wrap: break-word;min-width: 160px;max-width: 160px; white-space:normal">{{d.value.value}}</td>
                          </tr>
                        </table>
                      </li>
                    </ul>
                  </div>
                  <div *ngIf="c.key == 'response'">
                    <ul style="list-style: none;" class="list-unstyled"   class="list-group-item list-group-item-info" style="border: none">
                      <strong  class="list-group-item list-group-item-info"  (click)="c.value.isCollapsedContent =!c.value.isCollapsedContent"  (click)=" toggleSign(sign)" >
                        <span class="glyphicon glyphicon-{{sign}}-sign" ></span>{{c.key}}
                      </strong>
                      <li  class="list-unstyled" *ngIf="c.value.isCollapsedContent" class="list-group-item list-group-item-info">
                        <table datatable="ng" class="table table-bordered table-striped table-condensed">
                          <thead>
                          <tr>
                            <th>Field</th>
                            <th>Length</th>
                            <th>Value</th>
                          </tr>
                          </thead>
                          <tr *ngFor="let d of c.value | keys" class="list-group-item-info">
                            <td nowrap=" ">{{d.value.Field}}</td>
                            <td>{{d.value.length}}</td>
                            <td style="word-wrap: break-word;min-width: 160px;max-width: 160px; white-space:normal">{{d.value.value}}</td>
                          </tr>
                        </table>
                      </li>
                    </ul>
                  </div>
                </li>
              </div>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

如何对 angular 中的现有列表实施搜索过滤器 2

How to implement search filter to an existing list in angular 2

typescript

angular2-forms

angular2-template