Angular 2中的条件(if,else)

时间:2016-08-09 13:46:24

标签: express angular conditional

我在.NET工作了几年,Silverlight现在我开始使用Angular 2和Expressjs。 我有一个疑问,即使我找不到如何在角2 + Expressjs中做到这一点,并且从客户端安全?

<% if(User.Identity.IsAuthenticated){ %>
     <b>Sign Out</b>
<% } else { %>
     <b>Sign In</b>
<% } %>

2 个答案:

答案 0 :(得分:13)

如果您需要“其他”,也许最好的方法是使用NgSwitch(https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html

类似于:

<div [ngSwitch]="User?.Identity?.IsAuthenticated">
  <b *ngSwitchCase="true">Sign Out</b>
  <b *ngSwitchDefault>Sign In</b>
</div>

答案 1 :(得分:7)

使用Angular 4,现在可以实现:

  • <强>同步

    假设我们已经定义了这个类变量:

    shown: boolean = true;
    

    如果是其他语法:

    <button (click)="shown = !shown">toggle 'shown' variable</button>
    <div *ngIf="shown; else elseBlock">If shown</div>
    <ng-template #elseBlock>else not shown</ng-template>
    

    请注意,必须使用ng-template才能使此结构指令起作用,因此如果您有自定义组件,请将其包装在ng-template中。下面是另一种语法,它也绑定到同一个类变量。

    如果是其他语法

    <button (click)="shown = !shown">toggle 'shown' variable</button>
    <div *ngIf="shown; then primaryBlock; else secondaryBlock"></div>
    <ng-template #primaryBlock>If shown</ng-template>
    <ng-template #secondaryBlock>else not shown</ng-template>
    
  • <强>异步

    类:

    userObservable = new Subject<{first: string, last: string}>();
    onButtonClick() {
      this.userObservable.next({first: 'John', last: 'Smith'});
    }
    

    模板:

    <button (click)="onButtonClick()">Display User</button>
    <div *ngIf="userObservable | async as user; else loading">
      Hello {{user.last}}, {{user.first}}!
    </div>
    <ng-template #loading>Waiting for click...</ng-template>