使用 angularJS 值显示和隐藏 HTML答案

【问题标题】：Show and hide HTML with angularJS value使用 angularJS 值显示和隐藏 HTML
【发布时间】：2023-03-07 17:51:01
【问题描述】：

当来自 AngularJS 的指令值 {{auth?.loggedIn}} 为真或假时，我想在我的 HTML 中显示和隐藏 <button> 元素。

我的 HTML：

<button (click)="onLogin()" class="btn btn-lg btn-primary btn-block">SSO Login</button>

Currently Logged In?  {{auth?.loggedIn}}

Logged in as:  {{currentUser?.profile?.email}}

<button type="submit" class="btn btn-lg btn-primary" onclick="window.location.href='/secondpage'">Go to second page</button>

想法是当{{auth?.loggedIn}} 为真时，显示第二个按钮：

当{{auth?.loggedIn}} 为假时，隐藏第二个按钮：

【问题讨论】：

你可以在你的元素上使用 *ngIf ``` *ngIf="expression" `` 在你的最后 ``` ``

标签： javascript html angularjs

【解决方案1】：

感谢您的帮助！我的解决方案很简单，使用 *ngIf="EXPRESSION":

<button (click)="onLogin()" class="btn btn-lg btn-primary btn-block">SSO Login</button>

Currently Logged In?  {{auth?.loggedIn}}

Logged in as:  {{currentUser?.profile?.email}}

<button type="submit" class="btn btn-lg btn-primary" *ngIf="auth.loggedIn" onclick="window.location.href='/secondpage'">Go to second page</button>

【讨论】：

【解决方案2】：

使用 *ngIf

<div *ngIf="auth?.loggedIn">

Currently Logged In?  {{auth?.loggedIn}}

Logged in as:  {{currentUser?.profile?.email}}

</div>

应该适合你。

查看 Angular 文档：here

【讨论】：