Jak korzystać z * ng, jeśli jeszcze?


631

Korzystam z Angulara i chcę użyć *ngIf else(dostępny od wersji 4) w tym przykładzie:

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

Jak mogę osiągnąć to samo zachowanie ngIf else?


1
Sprawdź tutaj kątowych 8 wyjaśnił z przykładu NgIf, NgIf indziej i NgIf Then Else freakyjolly.com/...
Code Spy

Odpowiedzi:


980

Kąt 4 i 5 :

za pomocą else:

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

możesz także użyć then else:

<div *ngIf="isValid;then content else other_content">here is ignored</div>    
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

lub thensam:

<div *ngIf="isValid;then content"></div>    
<ng-template #content>content here...</ng-template>

Próbny :

Plunker

Detale:

<ng-template>: jest własną implementacją <template>tagu Angulara, która jest zgodna z MDN :

Element HTML <template>jest mechanizmem służącym do przechowywania treści po stronie klienta, które nie są renderowane po załadowaniu strony, ale mogą być następnie tworzone podczas tworzenia za pomocą JavaScript.


8
Miałem nadzieję, że istnieje sposób na użycie <ng-template> bez innego znacznika, takiego jak div, ale dziwne, że to nie jest ... Wiem, że <div> jest usuwany, gdy go używasz, ale myślę, że to trochę dziwne jak implementacja.
Andre

20
@ andreas Możesz użyć <ng-container>klauzuli if
Martin Schneider

2
Uwaga: możesz użyć ng-containerdla kontenera zawierającego * ngIf, ale nie dla szablonu
Simon_Weaver

@Simon_Weaver Zrozumiałem to na własnej skórze. Ale dlaczego? dlaczego nie pozwolili *ngIf na pracę ng-template?
Eran Medan

<div * ngIf = "isValid; następnie treść else other_content"> tutaj jest ignorowana </div> nie jest ignorowana. jest to miejsce na wstrzyknięcie szablonu
dimson d

185

W Angular 4.xx Możesz użyć ngIf na cztery sposoby, aby uzyskać prostą procedurę, jeśli inaczej:

  1. Po prostu użyj If

    <div *ngIf="isValid">
        If isValid is true
    </div>
    
  2. Używanie If with Else (uwaga na templateName )

    <div *ngIf="isValid; else templateName">
        If isValid is true
    </div>
    
    <ng-template #templateName>
        If isValid is false
    </ng-template>
    
  3. Używanie If z Then (uwaga na templateName )

    <div *ngIf="isValid; then templateName">
        Here is never showing
    </div>
    
    <ng-template #templateName>
        If isValid is true
    </ng-template>
    
  4. Używanie If z Then i Else

    <div *ngIf="isValid; then thenTemplateName else elseTemplateName">
        Here is never showing
    </div>
    
    <ng-template #thenTemplateName>
        If isValid is true
    </ng-template>
    
    <ng-template #elseTemplateName>
        If isValid is false
    </ng-template>
    

Wskazówka: ngIf ocenia wyrażenie , a następnie renderuje następnie lub innego szablonu w jego miejsce, gdy wyrażenie jest truthy lub falsy odpowiednio. Zazwyczaj:

  • wtedy szablon jest wbudowanym szablonem ngIf, chyba że jest powiązany z inną wartością.
  • w przeciwnym razie szablon jest pusty, chyba że jest związany.

Wygląda na to, że kompilator nie akceptuje ...; else .... Prawdopodobnie ;należy je usunąć.
slartidan

5
w ...; else ...
angular

20

Aby pracować z obserwowalnym, to zwykle robię, aby wyświetlić, jeśli obserwowalna tablica składa się z danych.

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

8

„bindEmail” sprawdzi, czy e-mail jest dostępny, czy nie. jeśli istnieje adres e-mail, wyświetli się Wyloguj, w przeciwnym razie wyświetli się Logowanie

<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>

2
To nie działa Gdyby było poprawne, nadal nie dodałoby żadnej wartości, ponieważ zaakceptowana odpowiedź pokazuje już, jak to zrobić.
Günter Zöchbauer

8

Możesz użyć <ng-container>i <ng-template>dla osiągnięcia tego

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>
     <div>Template 1 contains</div>
</ng-template>

<ng-template #template2>
     <div>Template 2 contains </div>
</ng-template>

Poniżej znajduje się demo Stackblitz Live

demo na żywo

Mam nadzieję, że to pomoże ... !!!


8

Dla Angular 9/8

Link źródłowy z przykładami

    export class AppComponent {
      isDone = true;
    }

1) * ngIf

    <div *ngIf="isDone">
      It's Done!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!isDone">
      It's Not Done!
    </div>

2) * ngIf i Else

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * ngIf, Then and Else

    <ng-container *ngIf="isDone;  then iAmDone; else iAmNotDone">
    </ng-container>

    <ng-template #iAmDone>
      It's Done!
    </ng-template>

    <ng-template #iAmNotDone>
      It's Not Done!
    </ng-template>

To tylko powtarza to, co już zaakceptowano
phil294

6

Składnia dla ngIf / Else

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

wprowadź opis zdjęcia tutaj

Używanie NgIf / Else / Then jawnej składni

Aby dodać szablon, musimy po prostu powiązać go z szablonem.

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

wprowadź opis zdjęcia tutaj

Obserwowalne za pomocą NgIf i Async Pipe

Po więcej szczegółów

wprowadź opis zdjęcia tutaj


6

Po prostu dodaj nowe aktualizacje z Angular 8.

  1. W przypadku, gdy z innym, możemy użyć ngIf i ngIfElse .
<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>
  1. W przypadku, gdy tak, możemy użyć ngIf i ngIfThen .
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
  1. W przypadku, gdy z tym i innym, możemy użyć ngIf , ngIfThen i ngIfElse .
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

Świetny! Niedawno przenieśliśmy się na kątowy 8
Islam Murtazaev


5

Wynikowa wartość wyrażenia ngif nie będzie tylko logiczną wartością prawda lub fałsz

jeśli wyrażenie jest tylko przedmiotem, nadal ocenia je jako prawdę.

jeśli obiekt jest niezdefiniowany lub nie istnieje, to ngif oceni to jako fałsz.

powszechnym zastosowaniem jest, jeśli obiekt został załadowany, istnieje, a następnie wyświetla zawartość tego obiektu, w przeciwnym razie wyświetla „ładowanie .......”.

 <div *ngIf="!object">
     Still loading...........
 </div>

<div *ngIf="object">
     <!-- the content of this object -->

           object.info, object.id, object.name ... etc.
 </div>

inny przykład:

  things = {
 car: 'Honda',
 shoes: 'Nike',
 shirt: 'Tom Ford',
 watch: 'Timex'
 };

 <div *ngIf="things.car; else noCar">
  Nice car!
 </div>

<ng-template #noCar>
   Call a Uber.
</ng-template>

 <!-- Nice car ! -->

inny przykład:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

szablon ngif

ngif kątowy 4


5

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

3

Istnieją dwie możliwości użycia warunku w znaczniku HTML lub szablonach:

  1. * ngIf dyrektywa CommonModule, w znaczniku HTML;
  2. Jeśli inaczej

wprowadź opis zdjęcia tutaj


1
<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font">    </div>

<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>

1

W kątach 4, 5 i 6

Możemy po prostu utworzyć zmienną odniesienia szablonu [2] i połączyć ją z warunkiem else w dyrektywie * ngIf

Możliwe składnie [1] to:

<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>


<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>

<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>


<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>

DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html

Źródła:

  1. https://angular.io/api/common/NgIf#syntax
  2. https://angular.io/guide/template-syntax#template-reference-variables--var-

1

Możesz także użyć trójskładnikowego operatora warunkowego Javascript? pod kątem:

{{doThis() ? 'foo' : 'bar'}}

lub

<div [ngClass]="doThis() ? 'foo' : 'bar'">

0

Wiem, że minęło trochę czasu, ale chcę to dodać, jeśli to pomoże. Sposób, w jaki poszedłem, to posiadanie dwóch flag w komponencie i dwóch ngIf dla odpowiednich dwóch flag.

To było proste i działało dobrze z materiałem, ponieważ szablon ng i materiał nie działały dobrze razem.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.