Vraag Voorwaardelijk (als, anders) in Angular 2


Ik heb een paar jaar in .NET gewerkt, Silverlight nu begin ik met Angular 2 en Expressjs. En ik twijfel er niet aan dat zelfs ik niet kon vinden hoe kan ik dit doen in hoek 2 + Expressjs, en is het veilig voor clientzijde?

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

11
2017-08-09 13:46


oorsprong


antwoorden:


Als je de "else" nodig hebt, is misschien de beste manier om NgSwitch te gebruiken (https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html)

Dus zoiets als:

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

13
2017-08-09 14:09



Met Angular 4 is dit nu mogelijk:

  • synchroon

    Laten we aannemen dat we deze klassenvariabele hebben gedefinieerd:

    shown: boolean = true;
    

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

    Let daar op ng-template moet worden gebruikt om deze structurele richtlijn te laten werken, dus als u een gebruikerscomponent heeft, wikkel deze dan naar binnen ng-template. Hieronder staat een alternatieve syntaxis die zich ook bindt aan dezelfde klassenvariabele.

    Als dan anders syntaxis:

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

  • asynchroon

    klasse:

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

    sjabloon:

    <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
2018-03-24 06:06