Angular 11 三元表达式 *ngIF答案

【问题标题】：Angular 11 Ternary expression *ngIFAngular 11 三元表达式 *ngIF
【发布时间】：2021-05-11 06:27:23
【问题描述】：

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

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

谢谢

【问题讨论】：

这样的？ <a href="{{ auth.loggedInUser ? 'https://www.google.com' : 'https://www.amazon.com' }}">

标签： angular typescript conditional-statements syntax-error angular11

【解决方案1】：

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

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

【讨论】：

谢谢！有效！我忘记了三元的合成器:)
谢谢大家！你们太棒了！

【解决方案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;
    });
  }
}

【讨论】：