Solo quiero enumerar las categorías de un Blog en Angular. Cuando uso ngFor, muestra una lista de las categorías pero trae algunas repetidas, como si trajera todos los blogs y no solo las categorías que comparten algunos de ellos. Espero haber sido claro en esta pregunta.
Este es mi html:
<aside class="categories"> <h2 class="aside-title">Categorias</h2> <ul *ngFor="let data of datas; index as i"> <li class="nav-elipse-blue"><a [routerLink]="['/pagina',datas.category]" title="Blog CSS articles">{{ data.category.name }}</a></li> </ul> </aside>Parece que necesita eliminar los duplicados de su matriz.
Basado en esta respuesta , puedes hacer esto:
const uniqueCategorias = datas.filter((value, index) => { const _value = JSON.stringify(value); return index === obj.arr.findIndex(obj => { return JSON.stringify(obj) === _value; }); });y úsalo:
<ul *ngFor="let data of uniqueCategorias; index as i"> <li class="nav-elipse-blue"><a [routerLink]="['/pagina',datas.category]" title="Blog CSS articles">{{ data.category.name }}</a></li> </ul>y en el archivo TypeScript:
uniqueCategorias; getUniqueCategorias(){ uniqueCategorias = datas.filter((value, index) => { const _value = JSON.stringify(value); return index === obj.arr.findIndex(obj => { return JSON.stringify(obj) === _value; }); }); }myCategories(datas: any){ let newArr = []; let uniqueArray:any; datas.forEach((item, index) => { newArr.push(item.category.name); uniqueArray = newArr.filter(function(item, pos, self) { return self.indexOf(item)===pos; }) }); return uniqueArray;}
Primero debe eliminar los duplicados de una matriz y luego debe usar * ngFor.
Puede eliminar duplicados de diferentes maneras:
usando conjunto
let data = ['A', 'B', 'A', 'C', 'B']; let uniqueData = [...new Set(data)];Usando forEach() e include() :
let data = ['A', 'B', 'A', 'C', 'B']; let uniqueData = []; data.forEach((c) => { if (!uniqueData.includes(c)) { uniqueData.push(c); } });Hay otros métodos, pero estos son más comprensibles.
Después de eso en tu HTML
<ul *ngFor="let data of uniqueData"> <li>{{category}}</li> </ul>