¿Cómo usar la variable de índice ngFor en el cálculo del valor del atributo del elemento HTML?

Solo un aprendiz

Soy nuevo en Angular y busqué pero no puedo encontrar la respuesta a mi pregunta.

He definido una variable en mi clase y planeo usarla en la plantilla.

public colors = ['red', 'green', 'blue', 'yellow'];

En la plantilla, tengo el siguiente código:

<div *ngFor="let c of colors; index as i">
    <div [style.width]="'100px'" [style.height]="{{(i+1)*10}}px" [style.backgroundColor]="c">{{c}}</div>
</div>

Mi intención es calcular la altura de CSS mediante la fórmula (i+1)*10px. La sintaxis del fragmento superior no es correcta. ¿Cuál es la forma correcta de implementarlo?

Abdul Basit |

Simplemente elimine los corchetes []. Aquí se actualiza uno a continuación

<div *ngFor="let c of colors; let i  =  index">
    <div  style.height="{{(i+1)*10}}px" [style.backgroundColor]="c">{{c}}</div>
</div>

Echa un vistazo a StackBlitz

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

¿Cómo insertar el valor del atributo del elemento en la matriz de JavaScript?

Cómo asignar el valor de la variable angularjs al atributo del elemento html, como el atributo de nombre del elemento de entrada

¿Cómo puedo usar el valor del elemento de ngFor fuera del mismo elemento?

Cómo utilizar el valor del atributo 'valor' del elemento de opción seleccionado en javascript

¿Cómo puedo obtener el valor del atributo del elemento html en cypress?

¿Cómo cambio el valor del elemento en función del atributo de datos?

¿Cómo obtener el valor del atributo del elemento del nodo principal principal de un elemento secundario en javascript?

¿Cómo usar el valor de la variable de entorno en el archivo del proyecto?

extraer el valor del elemento de la ruleta y usarlo en el cálculo

¿Cómo puedo cambiar el valor del elemento html en función de la entrada del usuario?

Cómo cambiar el valor del atributo de la clase de elemento usando selenio

¿Cómo puedo obtener el valor del atributo del elemento en XML?

¿Cómo obtener el valor del atributo del elemento en angular 2?

¿Cómo obtener el valor del atributo de origen de la imagen de la etiqueta img html en c #?

¿Cómo obtener el valor del atributo de origen de la imagen de la etiqueta img html en c #?

cómo cambiar el valor del atributo del elemento en xml a través de python3

¿Cómo obtener el valor del elemento HTML en JavaScript?

¿Cómo encontrar el elemento con un atributo y cambiar el valor del atributo en javascript?

¿Cómo puedo obtener el valor del archivo de configuración y establecerlo en la variable $ atributo en el archivo del modelo laravel?

Cómo encontrar el índice positivo del elemento [-1] en la lista de Python

Cómo encontrar el índice positivo del elemento [-1] en la lista de Python

cómo obtener el valor del atributo de la etiqueta en la plantilla

Cómo cambiar la variable de estado como verdadera según el valor del índice

JQuery: obtiene el valor del atributo de datos del elemento en el selector, no en el atributo

devolviendo el índice del elemento en la lista C ++

Sequlize cómo usar el nombre del atributo de la tabla unida en una clase where

cómo obtener el valor del atributo seleccionado en la lista de datos usando jQuery

¿Cómo SELECCIONAR la base del número máximo en el valor de otro atributo?

¿Cómo encontrar el índice de cadena en la matriz java a partir del valor dado?