Angular Comment utiliser * ngIf et * ngFor sur le même élément Html

Question

J'ai un ensemble d'enregistrements qui s'affiche, au lieu de masqué, je veux utiliser * ngIf mais si j'écris * ngIf il indique que l'erreur ne peut pas utiliser ngIf et ngFor sur le même élément.

<scx-indv-supplier
          class="row"
          *ngFor="let request of suppliers"
          [hidden]="request.status === 'CANCELLED' &&  request.durationDays > 179"
          [request]="request"
          [requestId]="request.requestId"
        >
</scx-indv-supplier>

Mais si vous utilisez un div au-dessus de scx-indv-supplier et écrivez comme ceci, cela génère une erreur Impossible de lire la propriété 'status' de undefined

<div *ngIf="request.status != 'CANCELLED' &&  request.durationDays > 179">
    <scx-indv-supplier
    class="row"
    *ngFor="let request of suppliers"
    [request]="request"
    [requestId]="request.requestId"
  ></scx-indv-supplier>
</div>

Answer 1

Vous pouvez utiliser la balise ng-container ici, comme ci-dessous

<ng-container *ngFor="let request of suppliers" >
<div>
<scx-indv-supplier
    class="row"
    *ngIf="request.status != 'CANCELLED' &&  request.durationDays > 179"
    [request]="request"
    [requestId]="request.requestId"
  ></scx-indv-supplier>
</div>
</ng-container>

Comme vous ne pouvez pas faire référence, vous demandez une variable en dehors de la portée de la boucle

Answer 2

La réponse est publiée dans la documentation officielle concernant les directives structurelles

Un jour, vous voudrez répéter un bloc de HTML, mais seulement lorsqu'une condition particulière est vraie. Vous allez essayer de mettre à la fois un * ngFor et un * ngIf sur le même élément hôte. Angular ne vous laissera pas. Vous ne pouvez appliquer qu'une seule directive structurelle à un élément.

La raison en est la simplicité. Les directives structurelles peuvent faire des choses complexes avec l'élément hôte et ses descendants. Lorsque deux directives revendiquent le même élément hôte, lequel a la priorité? Lequel devrait commencer, le NgIf ou le NgFor? Le NgIf peut-il annuler l'effet du NgFor? Si tel est le cas (et il semble qu'il devrait en être ainsi), comment Angular devrait-il généraliser la possibilité d'annuler pour d'autres directives structurelles?

Il n'y a pas de réponses faciles à ces questions. L'interdiction de plusieurs directives structurelles les rend sans objet. Il existe une solution simple pour ce cas d'utilisation: placez le * ngIf sur un élément conteneur qui encapsule l'élément * ngFor. Un ou les deux éléments peuvent être un ng-container, vous n'avez donc pas à introduire de niveaux supplémentaires de HTML.

Answer 3

Si je me souviens bien, l'erreur vous indique également quelle est la solution.

Dans ce cas, vous devez utiliser ng-template pour envelopper votre *ngFor:

  <ng-template *ngFor="let request of suppliers"
    <scx-indv-supplier
      class="row"
      [hidden]="request.status === 'CANCELLED' &&  request.durationDays > 179"
      [request]="request"
      [requestId]="request.requestId"
     >
     </scx-indv-supplier>
   </ng-template>