if else în sintaxa șablonului angular2 (Programare, Angular, Șablon Angular2)

Tampa a intrebat.

Angular2..de ce și cum?

Cum se execută condiția if de mai jos în angular2

    <td *ngFor="let val of rows;let j=index">
            IF J==0
                 <label>{{val}}</label>
            ELSE:
               <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}</label>

</td>

3 răspunsuri
Teddy Sterne

Puteți utiliza *ngIf directivă structurală cu sintaxa if-else pentru a obține acest rezultat.

<label *ngIf="j === 0; else elseBlock">{{val}}</label>
<ng-template #elseBlock>
    <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}</label>
</ng-template>

O altă opțiune este de a utiliza două *ngIf blocuri și să inversați condiționalul, astfel:

<label *ngIf="j === 0">{{val}}</label>
<label *ngIf="j !== 0" style="color:#000000;font-size:12px;padding-top:5px">{{val}}</label>

Comentarii

  • Eu cred că *ngIf="j === 0; else elseBlock" este o caracteristică Angular4, nu funcționează în Angular 2, nu-i așa? Oricum, aceasta ar fi cea mai bună abordare în opinia mea: 1. Faceți upgrade la Angular 4. 2. Aplicați acest cod. –  > Por SrAxi.
  • Acesta este corect. Nu eram sigur ce versiune de Angular OP folosea, așa că am furnizat răspunsul pentru versiunea curentă a cadrului și o soluție de rezervă. Mă îndoiesc de angular2-template tag-ul înseamnă de fapt sintaxa șablon pentru versiunea 2.X ca referințe de descriere Angular2 care nu este numele corect al cadrului. –  > Por Teddy Sterne.
  • Într-adevăr. „Angular 2” nu mai există, acum este doar Angular pentru versiunile 2+, iar AngularJs pentru versiunile 1.x. 😀 –  > Por SrAxi.
SrAxi

Dacă plănuiești să faci upgrade la Angular 4, ai putea folosi noul if / else din șablonul care include această versiune. Exemplu:

<div *ngIf="someCondition; else falsyTemplate">
  <h1>Condition Passed!</h1>
</div>

<ng-template #falsyTemplate>
  <h1>Condition Failed!</h1>
</ng-template>

Verificați următoarele linkuri utile:

Personal, v-aș recomanda să faceți upgrade la Angular 4.

Emad Alashi

Puteți face acest lucru în Angular 2 utilizând opțiunea <ng-container> element. În exemplul dvs. ar trebui să fie ceva de genul acesta:

<td *ngFor="let val of rows;let j=index">
    <ng-container *ngIf="J==0">
        <label>{{val}}</label>
    </ng-container>
    <ng-container *ngIf="J!=0">
        <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}
</label>
    </ng-container>
</td>

Puteți găsi mai multe informații în documentele de utilizare: https://angular.io/guide/structural-directives#ng-container-to-the-rescue.