Tengo una función que devuelve una cadena, una clase css y un valor booleano como este [falso, green_box]. Quiero utilizar estos valores en HTML a continuación, pero desafortunadamente no puedo hacerlo. ¿Cómo puedo acceder a los valores? Dado que la función se llama varias veces dentro del archivo HTML, no puedo asignar los valores de retorno en una variable en el archivo TypeScript.
Tenga en cuenta que puedo usar una función diferente para devolver un valor booleano, pero el objetivo es encontrar una manera de utilizar múltiples valores devueltos por una función en HTML.
A continuación se muestra mi HTML
<div *ngIf="getClass('investing', 'plan')[0]" class="prio_box dnd_move" data-drag="list-1" data-drag-index="0"> <span [ngClass]="getClass('investing', 'plan')[1]" class="dnd_move clr-box"> </span> <span class="drag_content dnd_move">Plan</span> </div>Aquí está mi función,
getClass(component: string, value: any) { component = component.toLowerCase(); value = value.replace(/\s/g, ""); let pathValue = this.control[component] ? this.control[component.toLowerCase()][value] : null; this.allGreen.add(pathValue); return [pathValue == Status.Yes ? "green_box" : pathValue == Status.DontKnow ? "yellow_box" : "red_box", pathValue == Status.Yes ? false : pathValue == Status.DontKnow ? true : true]; }Intenta hacer algo como esto:
<ng-container *ngIf="getClass('investing', 'plan') as class"> <div *ngIf="class[0]" class="prio_box dnd_move" data-drag="list-1" data-drag-index="0"> <span class="dnd_move clr-box {{class[1] || ''}}"> </span> <span class="drag_content dnd_move">Plan</span> </div> </ng-container>De esta manera, puede evitar que la función se llame varias veces.