Winkel-2 bedingte ngFor

Ich versuche zu bereinigen meinem template-code. Ich habe Folgendes:

<ul>
  <li *ngIf="condition" *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>
  <li *ngIf="!condition" *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
  </li>
</ul>

Gibt es eine Möglichkeit, bedingt pick array1 oder array2 Durchlaufen mit *ngIf oder etwas so, dass ich mich nicht zu wiederholen, so viel template-code? Dies ist nur ein Beispiel; meine eigentliche <li> enthält viel mehr Inhalt, so dass ich wirklich don ' T wollen, mich zu wiederholen. Danke!

InformationsquelleAutor 7ball | 2016-12-21

  <li *ngFor="let a of (condition ? array1 : array2)">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>

Danke! Genau das was ich brauche.

InformationsquelleAutor Matej Maloča

Verwendung einer template-tag mit [ngIf] außerhalb der ngFor Schleife.

<ul>
  <template [ngIf]="condition">
   <li *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
   </li>
  </template>
  <template [ngIf]="!condition">
   <li *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
   </li>
  </template>
</ul>

Lesen Sie auch über die template-syntax hier: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#Stern-Vorlage

InformationsquelleAutor Peter Salomonsen

0

Können Sie nicht sowohl eine *ngFor und ein *ngIf im gleichen element. Sie können ein element innerhalb der <li> mit der *ngFor. Wie:
```
<li *ngIf="condition">
    <ul>
        <li *ngFor="let a of array1">
```
Oder verwenden Sie den bedingten innerhalb der *ngFor. Wie diese:
```
<li *ngFor="let a of (condition?array1:array2)">
```
Oder Sie können eine Vorlage verwenden, wie Peter Salomonsen angewiesen.

InformationsquelleAutor nick zoum
0

Können Sie Gebrauch machen von der ng-container die nicht anerkannt ist DOM, daher nur verwendet werden für eine Bedingung. Siehe Beispiel unten:
```
 <tr *ngFor="let company of companies">
        <ng-container *ngIf="company.tradingRegion == 1">
            <td>{{ company.name }}</td>
            <td>{{ company.mseCode }}</td>
         </ng-container>
  </tr>
```
Den code oben: `

Anzeige einer Liste aller Unternehmen, in denen die tradingRegion == 1

`

InformationsquelleAutor Mwizak
0

Können wir verstecken das element mit bootstrap-Anzeige-Eigenschaft, basierend auf der Bedingung.
```
<li [ngClass]="{'d-none': condition}" *ngFor="let a of array1">
 <p>{{a.firstname}}</p>
 <p>{{a.lastname}}</p>
</li>
```
InformationsquelleAutor mahesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.