Bedingt (wenn, sonst) in Angular 2

Question

Hallo Ich habe ein paar Jahre in .NET gearbeitet, jetzt beginne ich mit Agular 2 und Expressjs. Und ich habe Zweifel, dass auch ich nicht finden konnte, wie kann ich das in eckigen 2 + expressjs tun, und ist sicher von der Client-Seite?

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

Answer 1

Wenn Sie die "else", vielleicht der beste Weg NgSwitch zu verwenden ist (https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html)

So etwas wie:

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

Answer 2

mit kantigen 4, ist dies jetzt möglich:

• SYNCHRON

  Nehmen wir an, dass wir diese Klassenvariable definiert haben:

  shown: boolean = true; 
  

  Wenn sonst Syntax:

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

  Beachten Sie, dass ng-template müssen für diese Struktur Richtlinie verwendet werden, um zu arbeiten, Wenn Sie also eine benutzerdefinierte Komponente haben, wickeln Sie sie in ng-template. Unten ist eine alternative Syntax, die auch an die gleiche Klassenvariable bindet.

  Wenn dann sonst Syntax:

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

  ---

• Asynchron

  Klasse:

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

  Vorlage:

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