En el siguiente fragmento, estoy llamando a la misma función llamada isSiteAlreadyAdded(site.id) para 3 atributos diferentes. ¿Hay alguna manera de que pueda almacenar el valor de una etiqueta de opción particular y usarlo para un atributo de opciones dado?
<div class="template-form-input-container"> <select style="width: 100%;" id="sites" [(ngModel)]="site" name="sites" #sites="ngModel" required> <option [ngValue]="null" selected>Select Site</option> <option *ngFor="let site of sitesToAdd" [ngValue]="site" data-toggle="tooltip" data-placement="top" title="{{isSiteAlreadyAdded(site.id) ? 'Site is already added.':''}}" [ngClass]="{'alert alert-secondary': isSiteAlreadyAdded(site.id)}" [disabled] = "isSiteAlreadyAdded(site.id)">{{site.name}}</option> </select> </div>Como se describe en la publicación vinculada de @dan vid, las llamadas a funciones dentro de la plantilla son una mala práctica porque se ejecutarán con cada marca de detección de cambio.
Entonces, puede usar una tubería o precalcular el valor respectivo.
Tubo
Si está utilizando una tubería, aún calculará los valores varias veces, pero solo si el valor de entrada de la tubería cambia, lo que reduce mucho los tiempos de recálculo en comparación con las llamadas a funciones en la plantilla.
Una tubería básica se vería así:
@Pipe({ name: 'isAlreadyActive' }) export class IsAlreadyActivePipe implements PipeTransform { transform(id: string): boolean { // <- or any other return type instead of boolean // Implement your check and return the result } }Y la llamada en tu caso quedaría así:
<option ... title="{{ site.id | isAlreadyActive ? 'Site is already added.': '' }}" ... > {{site.name}} </option>Encontrará más información sobre tuberías aquí .
Almacenar un resultado condicional en una variable
También existe la posibilidad de almacenar el valor de retorno de la tubería en una variable (ver aquí ).
Esto se vería así:
<ng-container *ngIf="site.id | isAlreadyActive as isActive"> <option ... title="{{ isActive ? 'Site is already added.': '' }}" ... > {{site.name}} </option> </ng-container> En este ejemplo, hemos almacenado el resultado en isActive y su cálculo solo se ejecutará una vez, pero tan pronto como el valor devuelto sea falsy , el contenido de *ngIf no se muestra.
En su caso, por ejemplo, podría devolver en lugar de un simple booleano y un objeto que contenga un booleano, por ejemplo, { isActive: returnValue } . De esa manera, su valor de retorno sería truthy y se mostraría el contenido.
Cálculo previo
La otra opción sería calcular previamente el valor en su componente y asignar el valor a site.isActive como ejemplo. De esa manera, solo tiene un cálculo, que también es mejor que una llamada de función desde la plantilla.