I am dealing with a data structure where each parent has multiple child items. I am trying to hide duplicate parent items, but accidentally ended up hiding all duplicated records instead. I followed a tutorial, but now I need help fixing this issue. I only want to hide the parent items, not remove the entire record.
My datatable: Failed Results: Expected Results:
Parent Child Parent Child Parent Child
Lee 123 Lee 123 Lee 123
Lee 124 Rose 111 124
Lee 125 125
Rose 111 Rose 111
code:
//our root app component
import { Component, NgModule, VERSION } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Pipe, PipeTransform, Injectable } from '@angular/core'
@Pipe({
name: 'uniqFilter',
pure: false
})
@Injectable()
export class UniquePipe implements PipeTransform {
transform(items: any[], args: any[]): any {
// filter items array, items which match and return true will be kept, false will be filtered out
return _.uniqBy(items, args);
}
}
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<ul>
<li *ngFor="let account of accounts | uniqFilter:'Parent'">{{ account.Parent }} and {{ account.Child }}</li>
</ul>
</div>
`,
directives: [],
pipes: [UniquePipe]
})
export class App {
constructor() {
this.accounts = [{
"Parent": 'Lee',
"Child": "4/6/2016"
},
{
"Parent": 'Lee',
"Child": "4/7/2016"
},
{
"Parent": 'Rose',
"Child": "4/9/2016"
},
{
"Parent": 'Rose',
"Child": "4/10/2016"
},
{
"Parent": 'Lee',
"Child": "4/12/2016"
}];
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, UniquePipe ],
bootstrap: [ App ],
providers: [ UniquePipe ]
})
export class AppModule {}