Angular 2中有條件的（if，else）

Question

您好我在.NET中工作了幾年，現在我開始使用agular 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

具有角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>