Angular 2中的条件(if,else)

Question

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

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

Answer 1

如果您需要"其他",也许最好的方法是使用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>

Answer 2

使用Angular 4,现在可以:

• 同步

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

  shown: boolean = true;
  

  如果是else语法:

  <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.下面是另一种语法,它也绑定到同一个类变量.

  如果那么else语法:

  <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>