Angular Come usare * ngIf e * ngFor sullo stesso elemento Html

Question

Ho una serie di record visualizzati, invece di nascosti voglio usare * ngIf ma se scrivo * ngIf dice errore non posso usare ngIf e ngFor sullo stesso elemento.

<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>

Ma se si utilizza un div sopra scx-indv-supplier e si scrive in questo modo, viene generato un errore Impossibile leggere lo stato della proprietà di 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

Puoi utilizzare il tag ng-container qui, come di seguito

<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>

Poiché non puoi fare riferimento, richiedi una variabile al di fuori dell'ambito del ciclo

Answer 2

La risposta è pubblicata nella documentazione ufficiale riguardante le direttive strutturali

Un giorno vorrai ripetere un blocco di HTML ma solo quando una particolare condizione è vera. Proverai a mettere sia un * ngFor che un * ngIf sullo stesso elemento host. Angular non te lo permette. È possibile applicare solo una direttiva strutturale a un elemento.

Il motivo è la semplicità. Le direttive strutturali possono eseguire operazioni complesse con l'elemento host e i suoi discendenti. Quando due direttive rivendicano lo stesso elemento host, quale ha la precedenza? Quale dovrebbe andare per primo, NgIf o NgFor? NgIf può annullare l'effetto di NgFor? Se è così (e sembra che dovrebbe essere così), come dovrebbe Angular generalizzare la possibilità di annullare per altre direttive strutturali?

Non ci sono risposte facili a queste domande. Il divieto di più direttive strutturali le rende discutibili. C'è una soluzione semplice per questo caso d'uso: mettere * ngIf su un elemento contenitore che avvolge l'elemento * ngFor. Uno o entrambi gli elementi possono essere un ng-container, quindi non è necessario introdurre livelli aggiuntivi di HTML.

Answer 3

Se ricordo bene l'errore ti dice anche qual è la soluzione.

In questo caso, devi usare ng-template per avvolgere il tuo *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>