Angolare – Come posso scrivere una condizione di interpolazione?

Ho una tabella che viene popolato attraverso il add client forma. Funziona benissimo e le modifiche vengono visualizzate. Il fatto è che ho una lista in cui un utente seleziona l’origine specifica e quindi viene salvato nel ngmodel. Qui c’è il codice.

Selezionare Elenco

 <mat-select [(ngModel)]="model.source" name="source" placeholder="Select Source ">
      <mat-option [value]="1 ">Upwork</mat-option>
      <mat-option [value]="2 ">Refer from Friend</mat-option>
      <mat-option [value]="3 ">Other</mat-option>
    </mat-select>

Ora nella mia tabella il valore che visualizza è 1 o 2 o 3 in base alla selezione. Voglio scrivere qualcosa, una condizione di interpolazione come questo.

Campo Di Tabella

<ng-container matColumnDef="source">
  <mat-header-cell *matHeaderCellDef> Source </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.source ? if value is 1 : display (upwork), if value is 2 : display(refer from friend)}} </mat-cell>
</ng-container>

Qualche cosa come questa, ho fatto come in angularjs io non sono sicuro circa Angolare

  • Ti guardi gli esempi nella sintassi del template documenti? E. g. angolare.io/guida/modello-sintassi#stile-associazione mostra un condizionale ternario espressione, o si potrebbe utilizzare ngSwitch sostituire l’intero elemento.
  • l’uomo non posso vedere interpolazione qui, è solo la struttura bining
  • La sintassi è coerente in tutto il modello. Per qualcosa di non banale, anche se, potrebbe essere meglio per scrivere la logica in classe e basta interpolare il valore risultante nel modello. Altrimenti il modello diventa molto difficile da leggere.

 

One Reply
  1. 32

    È possibile utilizzare nidificati ternario se

    {{element.source == 1 ? 'upwork' : (element.source == 2 ? 'refer from friend' : '')}}
    

    o forse meglio

    export class MyComponent {
      sourceNames = {1: 'upwork', 2: 'refer from friend', 3: 'other' };
    }
    
    {{sourceNames[element.source]}}
    
    • Modello errori di analisi: Parser Error: Unexpected token : a colonna 24 [{{elemento.sorgente === 1 ? : ‘upwork’ : (elemento.sorgente === 2 ? ‘vedere da un amico’ : “)}} ] in ng:///AppModule/[email protected]:42 (“header-cella *matHeaderCellDef> Fonte: </mat-intestazione-cellulare> <mat-cella *matCellDef=”lasciate che l’elemento”>[ERRORE ->]{{elemento.sorgente === 1 ? : ‘upwork’ : (elemento.sorgente === 2 ? ‘vedere da un amico’ : “)}} </ma”): ng:///AppModule/[email protected]:42
    • Si prega di aggiornare la tua domanda ed aggiungere il codice che causa il messaggio di errore e il messaggio di errore. Codice nei commenti è illeggibile.
    • C’era un esubero :. Ho rimosso nella mia risposta.
    • che cosa circa la terza condizione, sarà come questo ? {{elemento.sorgente === 1 ? ‘upwork’ : (elemento.sorgente === 2 ? ‘vedere da un amico’ : ” : (elemento.sorgente === 3 ? ‘altri’ : ” ) ) } }
    • Basta usare 'other' invece di '' con il codice della mia risposta. Aggiungo una risposta migliore.
    • Ovviamente la seconda opzione è migliore
    • La prima opzione potrebbe non funzionare a causa del fatto che il valore può essere una stringa. element.source == 1 dovrebbe fare il trucco
    • Buona pesca [value]="1 " con lo spazio dopo il numero. Con == invece di === dovrebbe funzionare giusto?
    • Sembra anche con [value]="1" angolare imposta string modello stackblitz.com/edit/angular-f212bc?file=app%2Fapp.component.ts
    • Giusto, ho assunto [ngValue]. Il mio Angolare + TS, la conoscenza diventa arrugginito :’-/
    • Come è il vostro sviluppo mobile?)
    • Ancora peggio 😀 non ho fatto alcun sviluppo mobile prima. Ma è con Flutter che utilizza il Dardo che mi rende felice ;-).
    • Angolare 7: [matTooltip]=”GridToolTip[indice]” ha funzionato per me! invece

Lascia un commento