Actualmente estoy trabajando en una interfaz Angular con TypeScript. Estoy tratando de obtener los valores de la casilla de verificación de los elementos de la matriz, que estoy iterando en el archivo HTML con ngFor, y agrego esos valores al valor total. El valor total debe mostrarse en la página web.
Logré obtener el valor una vez que se selecciona una casilla de verificación y aumentar el valor total de acuerdo con el valor de la casilla de verificación marcada. Sin embargo, falta la lógica para disminuir el valor total una vez que se deselecciona una casilla de verificación. Ahí es donde necesito ayuda.
Desafortunadamente, no pude encontrar la implementación específica de la lógica de resta al anular la selección. Muchas publicaciones de SO incluían JQuery que no pude usar, porque el código JQuery no funcionó a pesar de no tener errores (instalé Jquery en Angular con npm).
archivo HTML:
<span name="total" id="grandtotal">estimation total: {{grandtotal}}</span> <ul *ngFor="let ticket of tickets"> <li> <span>Estimation: {{ticket.estimation}}</span> <b>ID: {{ticket.id}}</b> <input type="checkbox" id="ticket.id" (click)= "calculateTotal(ticket.estimation)"> <li/> <ul/>Archivo mecanografiado:
totalValue: number = 0; public calculateTotal(checkboxValue: number): void { var checkboxes = <HTMLInputElement> document.getElementById('ticket.id'); if(checkboxes.checked) { this.totalValue = this.totalValue + checkboxValue; } }Puede usar una matriz de tickets para completar un formulario basado en plantillas.
Agregue un atributo seleccionado a su Ticket
type Ticket = { id: number; estimation: number; select: boolean; };Llene la matriz:
tickets: Ticket[] = [ { id: 1, estimation: 100, select: false }, { id: 2, estimation: 150, select: false }, ];cambie el código para recorrer todos sus boletos
public calculateTotal(): void { let total = 0; this.tickets.forEach((el) => { if (el.select) { total += el.estimation; } }); this.grandtotal = total; console.log('Calc'); }y cambia tu HTML ligeramente:
<span name="total" id="grandtotal">estimation total: {{ grandtotal }}</span> <ul> <li *ngFor="let ticket of tickets"> <span>Estimation: {{ ticket.estimation }}</span> <b>ID: {{ ticket.id }}</b> <b> selection:{{ ticket.select }}</b> <input type="checkbox" id="ticket.id" [(ngModel)]="ticket.select" (change)="calculateTotal()" /> </li> </ul>Ver ejemplo de trabajo en stackblitz: https://stackblitz.com/edit/angular-ivy-i7zmv2?file=src/app/app.component.ts