Angular ändern HTML, wenn ein Benutzer angemeldet ist

So versuche ich eckig über JQuery, die ein bisschen ein Mind Bender ist.Angular ändern HTML, wenn ein Benutzer angemeldet ist

In meiner App möchte ich Text nach einem Benutzer im angemeldeten Zustand ändern. Wenn er eingeloggt ist, möchte ich Folgendes zeigen: Mein Konto, und wenn niemand eingeloggt ist, möchte ich Folgendes zeigen: Anmelden/Registrieren.

Einfach in Jquery zu tun, nicht ganz sicher, die beste Methode für NG.

HTML

<li> 
    <a (click)="openLoginForm()">   
    <i class="fa fa-lock"></i> Login/Register</a> 
    <i class="fa fa-lock"></i> My Account</a> 
</li>

Was ich eine Variable tun möchte, ist zu überprüfen: LoggedIn, wenn sie wahr ist es „Mein Konto“ zeigt, wenn er falsch ist es „Login/Registrieren“ zeigt.

Ich bin nicht 100% klar, wie dies über Angular2 zu tun ...

Quelle

2017-03-03 HappyCoder

So etwas wie dies, setzen isLogged, wenn Benutzer auf Ihrer Komponente:

<a (click)="openLoginForm()"> 
    <i class="fa fa-lock"></i> {{ isLogged ? "My Account" : "Login/Register" }} 
</a>

Dies wird nur als einfache Bindung, arbeitet es Änderung nicht erkennt, wird, so dass Sie somthing wie dies tun könnten:

<a (click)="openLoginForm()"> 
     <i class="fa fa-lock"></i> {{ isLoggedTittle }} 
    </a>

und in der Komponente setzt den Titel

isLoggedTittle = logged ? "My Account" : "Login/Register";

Quelle

2017-03-03 11:51:12 freshbm

Das sieht die einfachste. Obwohl ich feststelle, dass die Zustandsänderung nicht erkannt wird. Ich rufe es von ngOnInit() {...} und ich sehe die Änderung in der Konsole, nur nicht in der html ... – HappyCoder

Ja, Sie haben Recht, das funktioniert nur zum ersten Mal. Dies ist keine Zwei-Wege-Bindung, so dass Änderungen nicht erkannt werden. Sie könnten Titel in Ihrer Komponente setzen, wie Sie das Flag isLogged setzen – freshbm

In dem Schema der Dinge, dies beantwortet die ursprüngliche Frage. Ich werde eine weitere Frage für die Zwei-Wege-Bindung stellen. – HappyCoder

-1

In Ihrer Situation ist die ideale Lösung ngIf verwenden:

<li>   
    <a (click)="openLoginForm()" *ngIf="!loggedIn"> 
     <i class="fa fa-lock"></i> Login/Register</a> 
    <a (click)="openMyAccountForm()" *ngIf="loggedIn"> 
     <i class="fa fa-lock"></i> My Account</a> 
</li>

Dies wird im Abschnitt Mein Konto zeigen, wenn loggedIn ist wahr und Login/Registrieren wenn falsch.

Durch die Verwendung von zwei verschiedenen Anker-Tags vollständig können Sie völlig verändern, wie jeder verhält, Symbol, was ist in ihnen usw.

Quelle

2017-03-03 11:50:34

Freshbm Antwort ist die bessere Lösung, aber ich wollte klären, was in {{ isLogged ? "My Account" : "Login/Register" }}

isLogged geschieht in der Regel ein boolean wahr oder falsch, sondern kann ein Wert

? ist sein ein Scheck

"My Account" wenn die boolean wahr ist oder der Wert ist gültig

: bedeutet, wenn falsch, nicht definiert oder null, tun dies

"Login/Register" wenn die boolean false ist oder der Wert null oder nicht definiert

Quelle

2017-03-03 11:56:51 mast3rd3mon

Angular ändern HTML, wenn ein Benutzer angemeldet ist

Antwort

Verwandte Themen