web-dev-qa-db-fra.com

Conditionnel (si, sinon) dans Angular 2

J'ai travaillé quelques années dans .NET, Silverlight maintenant je commence avec Angular 2 et Expressjs. Et j'ai un doute que même je ne pouvais pas trouver comment le faire dans angular 2 + Expressjs, et est à l'abri du côté client?

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

Si vous avez besoin du "else", la meilleure façon est peut-être d'utiliser NgSwitch ( https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html )

Donc quelque chose comme:

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

Avec Angular 4, c'est désormais possible:

  • DE MANIÈRE SYNCHRONE

    supposons que nous avons défini cette variable de classe:

    shown: boolean = true;

    Si autre syntaxe:

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

    Notez que ng-template doit être utilisé pour que cette directive structurelle fonctionne, donc si vous avez un composant personnalisé, enveloppez-le à l'intérieur ng-template. Vous trouverez ci-dessous une syntaxe alternative qui se lie également à la même variable de classe.

    Si alors sinon syntaxe:

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

  • DE MANIÈRE ASYNCHRONE

    classe:

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

    modèle:

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