Angular 11 三元表达式 *ngIF

Question

我有点卡住了。我正在尝试使用三元表达式编写 *ngIf else 语句目标是写 *ngIf 如果用户已登录徽标，则 href 会导致一个 Url 如果未登录 href 会导致另一个 URL.

https://stackblitz.com/edit/angular-ivy-oyyuxu?file=src%2Fapp%2Fapp.component.html

谢谢

Answer 1

您可以像这样在模板中使用三元表达式：

<a [href]="auth.loggedInUser ? 'http://userLogged' : 'http://userNotLogged'">

Answer 2

在不确定如何实现您的登录的情况下，我更改了您的代码以使其正常工作：

// app.component.ts 
export class AppComponent {
    name = 'Angular ' + VERSION.major;
    public auth: any = { loggedInUser: false };
}

// app.component.html
<a *ngIf="!auth.loggedInUser">
  <img id="nav-logo"
                src="https://icm.aexp-static.com/shopamex/img/global-images/Parks_3.jpg"/>
</a>

但是，简单的登录看起来更像这样：

import { Component } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public auth: { loggedInUser: boolean };

  public constructor(protected authService: AuthService) {
    let login$: Observable<boolean> = this.authService.Login();
    let sub: Subscription = login$.subscribe((success:boolean) => {
       this.auth.loggedInUser = success;
    });
  }
}

Angular 11 三元表达式 *ngIF

Angular 11 Ternary expression *ngIF

angular

typescript

conditional-statements

syntax-error

angular11