No repetir valores de un objeto en Angular 4

SW Almería Angular
#1

Buenos días, estoy intentado hacer un ngFor para pintar los resultados de un objeto. El problema es que hay repetidos.

GP {Id: 676, Title: "Yuliana Gonzalez "}
4
:
GP {Id: 676, Title: "Yuliana Gonzalez"}
5
:
GP {Id: 271, Title: "Ruth Sanchez"}
6
:
GP {Id: 271, Title: "Ruth Sanchez"}

Lo que necesito es mostrar su Id y Title pero sin que se repitan. ¿Cómo podría hacerlo?
Lo que intentado con .map, pero sólo me trae uno sólo, o sea, el Id o el Title y necesito los dos.

El resultado sería:

GP {Id: 676, Title: "Yuliana Gonzalez"}
    5
    :
   GP {Id: 271, Title: "Ruth Sanchez"}
    6
    :

Muchas gracias

#2

¿Puedes enseñarnos cómo estás haciendo el bucle?

#3 
<select class="form-control" (change)="getProjects()" [(ngModel)]="gerenteSeleccionado">
        <option [ngValue]="null">Seleccione un Gerente</option>
        <option *ngFor="let gerente of projectGPs" [ngValue]="gerente.Id">{{gerente.Title}}</option>
</select>
#4

Te ha faltado añadir un trackBy.

<select class="form-control" (change)="getProjects()" [(ngModel)]="gerenteSeleccionado">
    <option [ngValue]="null">Seleccione un Gerente</option>
    <option *ngFor="let gerente of projectGPs; trackBy: index" [ngValue]="gerente.Id">{{gerente.Title}}</option>
</select>

Añadiendo trackBy: index, te aseguras que no se van a repetir los valores, realizando un seguimiento por su índice en el array de origen.

#5

No funcionó, men, porque los index para cada uno son diferentes. Mira cómo es el Objeto cuando lo imprimo por consola

(8) [GP, GP, GP, GP, GP, GP, GP, GP]
0
:
GP {Id: 1062, Title: "Bianniz Jaramillo "}
1
:
GP {Id: 1071, Title: "Daniel Montaño "}
2
:
GP {Id: 501, Title: "Seleny Alvarez "}
3
:
GP {Id: 676, Title: "Yuliana Gonzalez "}
4
:
GP {Id: 676, Title: "Yuliana Gonzalez "}
5
:
GP {Id: 271, Title: "Ruth Sanchez "}
6
:
GP {Id: 271, Title: "Ruth Sanchez "}
7
:
GP {Id: 501, Title: "Seleny Alvarez "}
length
:
8
__proto__
:
Array(0)
#6

Lo normal es que te hagas una lista con los elementos únicos.


let unicos = [ ];
lista.forEach( it => {
  if (unicos.indexOf(it) == -1)
     unicos.push(it);
})

Después solo tienes que usar únicos.

Otra opción es que te hagas un pipe que haga esto de forma «automática».

Aún así, lo ideal sería que la lista que estás usando tendrías que obtenerla directamente con los datos únicps.

2 Me gusta
#7

Algo me dice que tu backend te los devuelve duplicados…