Angular 5: вызов метода из html

Question

Я не понимаю, почему это не работает.

Я пытаюсь показать ссылку для входа / выхода из системы на основе условий, вызвав метод из html. в консоли я вижу, что он возвращает «true», но никогда не меняет ссылку на «Logout». это всегда «Логин» на экране

<ul class="nav navbar-nav navbar-right">
    <li class="nav-item dropdown" [hidden]="!authenticated()">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-user" aria-hidden="true"></i> Welcome, {{user}}!
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="nav-link dropdown-item" (click)="logout()">Logout</a>
        </div>
    </li>
    <li class="nav-item dropdown" [hidden]="authenticated()">
        <a routerLinkActive="active" routerLink="/login">Login</a>
    </li>
</ul>

component.ts

authenticated() {
    console.log(localStorage.getItem('authenticated'));
    if(localStorage.getItem('authenticated') === 'true') {
        console.log("YES");
        return true;
    } else {
        console.log("NO");
        return false;    
    }
}

Прежде чем нажать на ссылку для входа

После нажатия на кнопку Войти

После ввода правильного имени пользователя / пароля (ее вы можете увидеть в консоли, она возвращает true)

Answer 1

Прежде всего, вам не следует вызывать функцию с директивой *ngIf, так как она будет запускаться при каждом обнаружении изменений. Это может привести к снижению производительности. Либо используйте переменную, либо преобразуйте ваш метод в свойство получателя, например

get authenticated(): boolean {
    return localStorage.getItem('authenticated') === true;
}

Во-вторых, используйте *ngIf вместо [hidden]:

<ul class="nav navbar-nav navbar-right">
    <li class="nav-item dropdown" *ngIf="authenticated">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-user" aria-hidden="true"></i> Welcome, {{user}}!
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="nav-link dropdown-item" (click)="logout()">Logout</a>
        </div>
    </li>
    <li class="nav-item dropdown" *ngIf="!authenticated">
        <a routerLinkActive="active" routerLink="/login">Login</a>
    </li>
</ul>

Answer 2

Заменить директиву hidden на директиву *ngIf.

<ul class="nav navbar-nav navbar-right">
    <li class="nav-item dropdown" *ngIf="!authenticated()">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-user" aria-hidden="true"></i> Welcome, {{user}}!
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="nav-link dropdown-item" (click)="logout()">Logout</a>
        </div>
    </li>
    <li class="nav-item dropdown" *ngIf="authenticated()">
        <a routerLinkActive="active" routerLink="/login">Login</a>
    </li>
</ul>

По сути это то же самое, но директива ng-if удаляет элемент из DOM, а атрибут hidden просто скрывает его.

Другое решение состоит в том, чтобы изменить ваш метод на это:

authenticated() {
    console.log(localStorage.getItem('authenticated'));
    if(localStorage.getItem('authenticated') === 'true') {
        console.log("YES");
        return true;
    } else {
        console.log("NO");
        return null;    
    }
}