2016-05-23 13 views
14

Mam aplikację kątową 2, która ma klasę o nazwie Użytkownik. Ten użytkownik ma atrybut o nazwie deleted_at, który ma wartość NULL lub zawiera datę/godzinę, oczywiście użytkownik jest usuwany, jeśli właściwość deleted_at nie jest pusta. Jest to, jak wygląda mój plik user.ts:Metoda wywołania z szablonu wewnątrz klasy Angular 2

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'; 
     } 
    } 
} 

Teraz oczekuje się, że może po prostu zadzwonić nazwę w moim szablonu z prostych linii:

{{ user.name }} 

To jednak nic nie zwraca, jak możesz wywołać pewne funkcje w szablonie kątowym 2? Czy to nie jest dozwolone?

Edit: wyczyścić rzeczy się trochę, to jest klasa użytkownika, że ​​używam w moim składnika user-list.component.ts, wielu użytkowników są obsługiwane w ten składnik.

Odpowiedz

10

Albo wywołać metodę tak:

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

dla tego podejścia trzeba mieć świadomość, że stracisz kontekst wykonania (this). Patrz na to pytanie po więcej szczegółów:

Albo można zdefiniować metodę jako getter, dzięki czemu można używać user.name w szablonie:

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

Dziękuję za odpowiedzi, nadal nie jestem na miejscu. Kiedy definiuję gettera tak, jak sugerujesz, otrzymuję błąd TS, który mówi: "=" oczekiwano, czy wiesz, że coś jest nie tak w składni? – hY8vVpf3tyR57Xib

+0

Mama dziwna. Zobacz ten plunkr: https://plnkr.co/edit/Twhqy3uKbvALwTrjJh0j?p=preview. Mi to pasuje. Jakiekolwiek różnice w stosunku do tego, co próbowałeś? –

+0

Ah błąd maszynopisu był tylko problemem składni. Główną różnicą w stosunku do twojego plunkera i mojego przykładu jest to, że w moim przykładzie przerzucam listę użytkowników w moim szablonie z: * ngFor = "let user of users", a dla każdego wpisu nazywam user.name. Zwraca pusty ciąg znaków, może to być spowodowane tym, że szablon nie rozpoznaje, że jest to obiekt klasy użytkownika? – hY8vVpf3tyR57Xib

0

Jeśli szablon jesteś refering to jest z twojego komponentu powyżej, możesz łatwo zrobić {{ name() }}. W Angular 2 nie trzeba najpierw odwoływać się do komponentu, aby wywoływać metody, tak jak to było w przypadku Angular 1. Jeśli twoja klasa jest tylko modelem, który zadeklarowałeś w swoim componet, musisz najpierw uzyskać odniesienie do tego modelu, a następnie zadzwonić do swojej metody {{ user.name() }}. Jednakże, jeśli twoja metoda jest po prostu zwykłym geterem, po prostu uzyskałbym dostęp do właściwości publicznej zamiast wywoływania tam metody.

Powiązane problemy