2016-05-23 27 views
14

Ho un'applicazione angolare 2 che ha una classe chiamata Utente. Questo utente ha un attributo chiamato deleted_at che è nullo o contiene un datetime, ovviamente l'utente viene cancellato se la proprietà deleted_at non è nulla. Questo è come il mio file user.ts appare:Metodo di chiamata da una classe Angular 2 all'interno del modello

User.ts

export class User { 
    id: number; 
    email: string; 
    created_at: string; 
    first_name: string; 
    last_name: string; 
    deleted_at: any; 

    name() { 
     if (this.deleted_at === null) { 
      return this.first_name; 
     } else { 
      return 'DELETED'; 
     } 
    } 
} 

Ora mi aspettavo che ho potuto solo chiamare nome nel mio modello con una semplice linea:

{{ user.name }} 

Ciò tuttavia non restituisce nulla, come puoi chiamare determinate funzioni nel modello angolare 2? O non è permesso?

Edit: per cancellare roba un po ', questo è un utente di classe che sto usando nella mia componente user-list.component.ts, più utenti sono trattati in questo componente.

risposta

10

O si chiama il metodo come questo:

{{user.name()}} // instead of {{user.name}} 

Per questo approccio è necessario essere consapevoli del fatto che si perde il contesto di esecuzione (this). Vedere questa domanda per maggiori dettagli:

Oppure si definiscono il metodo come un getter modo da poter utilizzare user.name nel modello:

get name() { 
    if (this.deleted_at === null) { 
    return this.first_name; 
    } else { 
    return 'DELETED'; 
    } 
} 
+1

Grazie per le vostre risposte, ancora non ci sono ancora. Quando definisco il getter come mi hai suggerito, ottengo un errore TS che dice: '=' atteso, sai se c'è qualcosa di sbagliato nella sintassi? – hY8vVpf3tyR57Xib

+0

Mamma strana. Vedi questo plunkr: https://plnkr.co/edit/Twhqy3uKbvALwTrjJh0j?p=preview. Per me funziona. Qualche differenza con quello che hai provato? –

+0

Ah l'errore di dattiloscritto era solo un problema di sintassi. La differenza principale con il plunker e il mio esempio è che nel mio esempio faccio un ciclo su un elenco di utenti nel mio modello con: * ngFor = "consenti all'utente" e per ogni voce chiamo user.name. Questo restituisce una stringa vuota, potrebbe essere perché il modello non riconosce che questo è un oggetto di classe User? – hY8vVpf3tyR57Xib

0

Se il modello che si sta riferendo è dal tuo componente sopra puoi fare semplicemente {{ name() }}. In Angular 2 non è necessario fare riferimento al componente in primo luogo per chiamare metodi come lo era in Angular 1. Nel caso in cui la tua classe sia solo un modello che hai dichiarato nella tua componente, devi prima ottenere il riferimento a quel modello e poi chiamare il tuo metodo {{ user.name() }}. Tuttavia, se il tuo metodo è solo un getter semplice, accedo semplicemente a una proprietà pubblica invece di chiamare un metodo lì.

Problemi correlati