0
173
VisualizaçõesClasificación y división angular y Array
Me disculpo de antemano si esta es una pregunta estúpida, pero Angular y Typescript no son mi fuerte. Estoy ayudando a un amigo y parece que no puedo superar este problema.
Tengo una matriz de jugadores que contiene información como el nombre y el color de la equipación. Todo lo que quiero hacer es ordenar o agrupar la matriz por color de la equipación bajo etiquetas H1 específicas.
import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { Players = [ { FirstName: 'Vader', KitColour: 'Blue', }, { FirstName: 'Darth', KitColour: 'Red', }, { FirstName: 'Yeeeeet', KitColour: 'Red', }, { FirstName: 'New', KitColour: 'Blue', }, ]; constructor() { this.Players.sort((a, b) => { var colorA = a.KitColour.toLowerCase(); var colorB = b.KitColour.toLowerCase(); if (colorA < colorB) { return -1; } if (colorA > colorB) { return 1; } return 0; }); const sliceArray = (arr, chunkSize) => { const result = []; for (let i = 0; i < arr.length; i += chunkSize) { const chunk = arr.slice(i, i + chunkSize); result.push(chunk); } return result; }; sliceArray(this.Players, 2); console.log(this.Players); } } <div class="container" *ngFor="let player of Players"> <!-- <div class="Red" *ngIf="player.KitColour === 'Red'"> <h1>Red Team</h1> <p>{{ player.FirstName }}</p> </div> <div class="Blue" *ngIf="player.KitColour === 'Blue'"> <h1>Blue Team</h1> {{ player.FirstName }} </div> --> <div class="{{ player.KitColour }}"> <h1>{{ player.KitColour }}</h1> <p>{{ player.FirstName }}</p> </div> Mi salida: 
¿Cómo puedo ordenarlos una sola vez bajo una sola etiqueta H1, ya sea azul o roja, según el color del kit? Ejemplo: nombres de jugadores rojos..
Nombres de jugadores azules..
3 Respostas
Responde à pergunta0
La mejor manera de abordar eso sería volver a trabajar en su objeto (o en un servicio o en el componente).
groupByKitColor = (array: any) => { return array.reduce((prev, actual) => { prev[actual.KitColour] = prev[actual.KitColour] || []; prev[actual.KitColour].push(actual); return prev; }, Object.create(null)); };Esta solución agrupará a los jugadores según la cantidad de colores que agregue en el futuro. Luego, solo aplica tu clase CSS.
Ver StackBlitz adjunto: https://stackblitz.com/edit/angular-ivy-dyflwe?file=src%2Fapp%2Fapp.component.html
PD: algunos comentarios aquí, debe hacer su lógica de clasificación en OnInit Lifecycle y no en el constructor (por convención) y sus variables deben seguir la convención camelCase;)
0
Ordenar matriz por propiedad KitColour
Players = [ { FirstName: 'Vader', KitColour: 'Blue', }, { FirstName: 'Darth', KitColour: 'Red', }, { FirstName: 'Yeeeeet', KitColour: 'Red', }, { FirstName: 'New', KitColour: 'Blue', }, ].sort((a, b) => a.KitColour.localeCompare(b.KitColour));y usa este html
<div *ngFor="let player of Players; let index = index"> <h1 *ngIf="0 === index">{{ player.KitColour }}</h1> <h1 *ngIf="0 !== index && player.KitColour! !== Players[index - 1].KitColour"> {{ player.KitColour }} </h1> <p>{{ player.FirstName }}</p> </div>0
Debido a que está colocando ngFor en el div principal, tendrá tantos elementos h1 como la longitud de la matriz (uno para cada elemento). Si conoce sus colores, simplemente extraiga el color fuera de ngFor y luego condicionalmente (con ngIf ) muestre los nombres