Angular 2 - problem z ngFor i ngIf w jednym elemencie

0

Zakładają w uproszczeniu, że mam kod w Angularze 2 jak poniżej w jaki sposób mogę generować wiersz <tr *ngFor="let subscriptionServiceItem of serviceItemsSet.subscriptionServiceItems"> w pętli warunkowo w zależności od subscriptionServiceItem.IsArchived? ngFor razem z ngIf nie mogą istnieć wspólnie w jednym elemencie.

          <!-- Service Items Sets -->
          <tbody *ngFor="let serviceItemsSet of customer.serviceItemsSets">

            <!-- Subscription Service Items -->
            <tr *ngFor="let subscriptionServiceItem of serviceItemsSet.subscriptionServiceItems">
                <td class="text-center text-danger status-icon-width">
                  <i *ngIf="subscriptionServiceItem.isBlocked" class="glyphicon glyphicon-remove-circle text-danger" title="Zablokowany"></i>
                </td>
            </tr>
          </tbody>
0

Rozwiązanie:

            <tr *ngFor="let subscriptionServiceItem of serviceItemsSet.subscriptionServiceItems" [hidden]="!((showArchived && subscriptionServiceItem.isArchived == true) || subscriptionServiceItem.isArchived == false)">
1

Ja to zawsze robię w ten sposób:

<ng-container *ngFor="let subscriptionServiceItem of serviceItemsSet.subscriptionServiceItems">
    <tr *ngIf="!((showArchived && subscriptionServiceItem.isArchived == true) || subscriptionServiceItem.isArchived == false)">
        
    </tr>
</ng-container>

Dzięki temu tr nie ukrywasz nadając mu klasę display: none, ale faktycznie nie ma go w DOM.

1 użytkowników online, w tym zalogowanych: 0, gości: 1