Angular Como usar * ngIf e * ngFor no mesmo elemento Html

Question

Eu tenho um conjunto de registros exibindo, em vez de oculto, eu quero usar * ngIf, mas se eu escrever * ngIf diz que o erro não pode usar ngIf e ngFor no mesmo 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>

Mas se usar um div em cima de scx-indv-supplier e escrever assim. Lança um erro Cannot read property 'status' of 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

Você pode usar a tag ng-container aqui, como abaixo

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

Como você não pode fazer referência, você solicita uma variável fora do escopo do loop

Answer 2

A resposta está publicada na documentação oficial sobre as Diretivas Estruturais

Algum dia você desejará repetir um bloco de HTML, mas somente quando uma condição particular for verdadeira. Você tentará colocar um * ngFor e um * ngIf no mesmo elemento de host. A Angular não permite. Você pode aplicar apenas uma diretiva estrutural a um elemento.

O motivo é a simplicidade. As diretivas estruturais podem fazer coisas complexas com o elemento hospedeiro e seus descendentes. Quando duas diretivas reivindicam o mesmo elemento de host, qual delas tem precedência? Qual deve ir primeiro, o NgIf ou o NgFor? O NgIf pode cancelar o efeito do NgFor? Em caso afirmativo (e parece que deveria ser), como o Angular deveria generalizar a capacidade de cancelar para outras diretivas estruturais?

Não há respostas fáceis para essas perguntas. A proibição de várias diretivas estruturais os torna discutíveis. Existe uma solução fácil para este caso de uso: coloque o * ngIf em um elemento de contêiner que envolve o elemento * ngFor. Um ou ambos os elementos podem ser um contêiner ng, então você não precisa introduzir níveis extras de HTML.

Answer 3

Se bem me lembro, o erro também diz qual é a solução.

Nesse caso, você deve usar ng-template para embrulhar *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>