Angular2, RC5: Not adding duplicate values in dropdown

Question

I am getting tests values from remote server, GroupID values can be duplicated, but I wish my dropdown will show values without duplication, I tried the following code, which is not working

<th>
<select class="form-control" (change)="reloadPosts({ GroupID: u.value })" #u>
<option value="">Select group id...</option>
<template *ngFor="let test of tests"> <option *ngIf="!test" value="{{ test.GroupID }}">
{{ test.GroupID }}
</option></template>
</select>
</th>

how can I do it with angular rc5 and above

thanks

Did it work with RC.4? What values are you using (string, object, ...)? — Günter Zöchbauer, Sep 05 '16 at 18:57
Try with objects instead or `trackBy` http://stackoverflow.com/questions/33363987/angular2-ngfor-inside-tree-model-wrong-order-when-remove-and-then-add-elements/35195155#35195155 — Günter Zöchbauer, Sep 05 '16 at 20:01

score 0 · Answer 1 · answered Sep 05 '16 at 19:53

You should be able to do this with a simple pipe...

@Pipe({ name: 'unique', pure: false })

export class UniquePipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return _.uniq(value);
    }
}

Then in your html use *ngFor="let test of tests | unique"

The pipe example uses underscore.js but feel free to write the filter any way you'd like.

More information on pipes.

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

I was unable to solve this using pipe, so I modified my component code, see: Angular2, create new array/map

edited May 23 '17 at 11:46

Community

1
1

answered Sep 06 '16 at 19:15

Shay Binyat

115
1
1
9

Angular2, RC5: Not adding duplicate values in dropdown

2 Answers2