* ngIf else eğer şablondaysa

Bir *ngIfifadede nasıl birden fazla davam olabilir ? Ben bir sahip Vue veya açısal 1 alışkınım if, else ifve else, ancak yalnızca bir sahip açısal 4 gibi görünüyor true( if) ve false( else) koşulu.

Belgelere göre sadece şunları yapabilirim:

  <ng-container *ngIf="foo === 1; then first else second"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

Ama birden çok koşulum olmasını istiyorum (buna benzer bir şey):

  <ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

Ama sonunda kullanmak zorunda kaldım ngSwitch, ki bu bir hack gibi geliyor:

  <ng-container [ngSwitch]="true">
    <div *ngSwitchCase="foo === 1">First</div>
    <div *ngSwitchCase="bar === 2">Second</div>
    <div *ngSwitchDefault>Third</div>
  </ng-container>

Alternatif olarak, Angular 1 ve Vue'dan alıştığım sözdizimlerinin çoğu Angular 4'te desteklenmiyor gibi görünüyor, bu yüzden kodumu bu gibi koşullarla yapılandırmanın önerilen yolu nedir?

Diğer bir alternatif, koşulları iç içe yerleştirmektir

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

Sadece kullanabilirsiniz:

<ng-template [ngIf]="index == 1">First</ng-template>
<ng-template [ngIf]="index == 2">Second</ng-template>
<ng-template [ngIf]="index == 3">Third</ng-template>

ng-konteyner parçası tasarımınız için önemli değilse sanırım.

İşte bir Plunker

Bu, yapmanın en temiz yolu gibi görünüyor

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

şablonda:

<ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>
<ng-template #elseif1>
    <ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
    <ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>

Koşullar farklı değişkenler içerdiğinde uygun bir else ififade gibi çalıştığına dikkat edin (bir seferde yalnızca 1 durum doğrudur). Diğer cevaplardan bazıları böyle bir durumda doğru çalışmıyor.

kenara: Tanrım açısal, bu gerçekten çirkin bir else ifşablon kodu ...

Durumunuza göre birden çok yol kullanabilirsiniz:

1. Eğer Değişken özgü sınırlıdır Number veya dize , en iyi yolu ngSwitch veya ngIf kullanıyor:

   <!-- foo = 3 -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="1">First Number</div>
       <div *ngSwitchCase="2">Second Number</div>
       <div *ngSwitchCase="3">Third Number</div>
       <div *ngSwitchDefault>Other Number</div>
   </div>
   
   <!-- foo = 3 -->
   <ng-template [ngIf]="foo === 1">First Number</ng-template>
   <ng-template [ngIf]="foo === 2">Second Number</ng-template>
   <ng-template [ngIf]="foo === 3">Third Number</ng-template>
   
   
   <!-- foo = 'David' -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="'Daniel'">Daniel String</div>
       <div *ngSwitchCase="'David'">David String</div>
       <div *ngSwitchCase="'Alex'">Alex String</div>
       <div *ngSwitchDefault>Other String</div>
   </div>
   
   <!-- foo = 'David' -->
   <ng-template [ngIf]="foo === 'Alex'">Alex String</ng-template>
   <ng-template [ngIf]="foo === 'David'">David String</ng-template>
   <ng-template [ngIf]="foo === 'Daniel'">Daniel String</ng-template>
   

2. Yukarıdaki kodlar uygun değilse, aksi takdirde kodlar ve dinamik kodlar aşağıdaki kodu kullanabilirsiniz:

   <!-- foo = 5 -->
   <ng-container *ngIf="foo >= 1 && foo <= 3; then t13"></ng-container>
   <ng-container *ngIf="foo >= 4 && foo <= 6; then t46"></ng-container>
   <ng-container *ngIf="foo >= 7; then t7"></ng-container>
   
   <!-- If Statement -->
   <ng-template #t13>
       Template for foo between 1 and 3
   </ng-template>
   <!-- If Else Statement -->
   <ng-template #t46>
       Template for foo between 4 and 6
   </ng-template>
   <!-- Else Statement -->
   <ng-template #t7>
       Template for foo greater than 7
   </ng-template>
   

Not: Herhangi bir format seçebilirsiniz, ancak her kodun kendi sorunları olduğunu fark edin

İç içe yerleştirmeyi ve ngSwitch'i önlemek için, Javascript'te mantıksal operatörlerin çalışma şeklini kullanan şu olasılık da vardır:

<ng-container *ngIf="foo === 1; then first; else (foo === 2 && second) || (foo === 3 && third)"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

Ya da belki üçlü operatörle koşullu zincirler kullanın. if … else if … else if … elseZincir.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#Conditional_chains

<ng-container *ngIf="isFirst ? first: isSecond ? second : third"></ng-container>

<ng-template #first></ng-template>
<ng-template #second></ng-template>
<ng-template #third></ng-template>

Bu yaklaşımı daha çok seviyorum.

<ion-row *ngIf="cat === 1;else second"></ion-row>
<ng-template #second>
    <ion-row *ngIf="cat === 2;else third"></ion-row>
</ng-template>
<ng-template #third>

</ng-template>

Angular, her zaman kullandığımız yapısal direktiflerin çoğunda kaputun altında ng-şablonu kullanıyor: ngIf, ngFor ve ngSwitch.

> Angular'da ng-şablonu nedir

https://www.angularjswiki.com/angular/what-is-ng-template-in-angular/

Bu eski numarayı karmaşık if / then / else bloklarını biraz daha temiz bir switch ifadesine dönüştürmek için de kullanabilirsiniz:

<div [ngSwitch]="true">
    <button (click)="foo=(++foo%3)+1">Switch!</button>

    <div *ngSwitchCase="foo === 1">one</div>
    <div *ngSwitchCase="foo === 2">two</div>
    <div *ngSwitchCase="foo === 3">three</div>
</div>