A volte abbiamo l'esigenza di mostrare frammenti di UI in base al valore di un campo. Per fare un esempio, supponiamo che l'utente debba decidere come pagare. La UI mette a disposizione una dropdown contententi i valori "Carta di credito" e "Bonifico". Se l'utente seleziona "Carta di credito" la UI mostra i campi per inserire i dati della carta, altrimenti mostra i dati per il bonifico.
La direttiva ngIf è comoda, ma quando il numero di opzioni comincia ad aumentare, richiede un pò di codice HTML. In questi casi torna più comoda la direttiva ngSwitch in associazione con la direttiva ngSwitchCase.
<div [ngSwitch]="paymentType"> <input *ngSwitchCase="'cc'" [formControlName]="cc"> <input *ngSwitchCase="'bb'" [formControlName]="bb"> </div>
La direttiva ngSwitch specifica il campo in base al quale basare lo switch, mentre la direttiva ngSwitchCase decide se renderizzare o meno il frammento di HTML confrontando il valore che gli passiamo col valore del campo specificato in ngSwitch. Nel nostro caso, se l'utente seleziona Carta di credito ("cc"), allora viene renderizzata la prima textbox, altrimenti viene renderizzata la seconda.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Effettuare il pull di git LFS in un workflow di GitHub
Eseguire attività pianificate con Azure Container Jobs
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Utilizzare i nuovi piani dedicati di Azure Container Apps
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Usare lo spread operator con i collection initializer in C#
Utilizzare Tailwind CSS all'interno di React: installazione
Verificare la provenienza di un commit tramite le GitHub Actions
Usare le collection expression per inizializzare una lista di oggetti in C#
Short-circuiting della Pipeline in ASP.NET Core
Utilizzare le collection expression in C#