以下是我的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
现在我想在我的搜索框中实现搜索/过滤到上面说的如果我键入321916010424它应该显示记录（匹配记录如下）
Transaction ref : 321916010424
request
response
我知道必须使用管道来完成，但我不知道如何实施或我应采取什么方法，如果我能够使用组件中的现有管道，如果可以的话，如何实现我是角度2或发展的新手。任何帮助将不胜感激
对于ref我的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"
}]
}
}]
}