Búsqueda de sitios web

html - Cambiar todo el color de fondo usando *ngFor [ngStyle]

Este es un problema de TypeScript y HTML. Déjame describir la situación. Hay un cuadro de entrada y un botón. Cuando escribo en el cuadro de entrada, automáticamente muestra el carácter en un párrafo que escribí en el cuadro de entrada. Cuando hago clic en el botón, funciona una función onClickAllow(). La función básicamente verifica un valor aleatorio negativo o positivo. También agrega el texto de entrada al arreglo. La salida es: número_de_índice.texto_de_entrada con color de fondo. Cuando Math.Random() > .5, el color de fondo será rojo, de lo contrario, verde. Mi código también funciona. Pero el problema es que cuando el color cambia, también cambia el contenido anterior. Código HTML Código TypeScript Salida-1 Salida-2

Si ves, Output-1 muestra el primer elemento con fondo de color rojo, pero en Output-2 cuando el segundo elemento aparece con fondo de color verde, también cambia el color de fondo del primer elemento. Pero quiero que cada elemento tenga un color de fondo separado.

Respuesta #1

Componente: typescript Plantilla: html

array = [];
status = '';

onClickButton(){
this.status = Math.random() > 0.5 ? 'negative' : 'positive';
this.array.push({name: 'name', type: this.status});
}
<button (click)="onClickButton()">Button</button>
<div *ngFor="let item of array; let i = index">
    <p [ngStyle]="{backgroundColor: item.type == 'negative' ? 'red' : 'green'}">{{ i+1 }}.{{ item.name }}</p>
</div>

Esta solución está funcionando.

Respuesta #2

Hasta donde entiendo, solo quieres una base de color según la posición del elemento en la lista de elementos de ngFor, esto se puede resolver obteniendo el índice de cada elemento y obteniendo el color según el índice.

componnet

  public getColor(index :number) : string {
    switch( index) { 
      case 0 : return "#f00"
      case 1 : return "#0f0"
      case 2 : return "#00f"
      default: return "#abc"
    }
  }

plantilla

<div *ngFor="let item of list;let i=index" [ngStyle]="{backgroundColor:getColor(i)}">
    {{item.name}}
</div>

demostración 🚀

Actualizado 🎉🎉

una tubería será una solución reutilizable

@Pipe({
  name: 'color'
})
export class ColorPipe implements PipeTransform {

  transform(index: number): any {
    switch( index) { 
      case 0 : return "#f00"
      case 1 : return "#0f0"
      case 2 : return "#00f"
      default: return "#abc"
    }
  }

}

plantilla

<div *ngFor="let item of list;let i=index" [ngStyle]="{backgroundColor: i | color }">
    {{item.name}}
</div>

demo 🚀

Artículos relacionados