Pelo código que você mostrou, há alguns pontos importantes a verificar porque a sintaxe @for e @if é recente no Angular (a partir da versão 17) e muita coisa muda em relação ao uso do *ngFor e *ngIf tradicionais. Vou listar como corrigi-los:
1. Sintaxe incorreta do bloco @else
Quando se usa @if e @else, você não deve usar ng-template como fazia no *ngIf. O bloco @else já substitui isso.
Seu código está assim:
} @else {
<ng-template #semPensamentos>
<div class="ff-inter sem-pensamentos">
<p>Ainda não há pensamentos cadastrados!</p>
</div>
</ng-template>
}
Isso está errado. O correto seria simplesmente:
} @else {
<div class="ff-inter sem-pensamentos">
<p>Ainda não há pensamentos cadastrados!</p>
</div>
}
2. Verifique se listaPensamentos é reativa
- Se
listaPensamentos vem de um Observable (ex.: listaPensamentos$), você precisa usar o pipe async.
Exemplo:
@if ((listaPensamentos$ | async)?.length > 0) {
@for (pensamento of (listaPensamentos$ | async); track pensamento) {
<div>
<app-pensamento [pensamento]="pensamento"></app-pensamento>
</div>
}
} @else {
<div class="ff-inter sem-pensamentos">
<p>Ainda não há pensamentos cadastrados!</p>
</div>
}
Se você não usar async, o Angular nunca vai renderizar porque o dado não estará disponível no template.
3. Verifique se está usando Angular 17 ou superior
Os blocos de controle (@if, @for, @switch) só funcionam a partir do Angular 17.
Para confirmar:
ng version
Se for menor que 17, você precisa continuar usando *ngIf e *ngFor.
4. Problema com track no @for
O track é equivalente ao trackBy do *ngFor. Você deve passar uma função ou chave única.
Seu código atual:
@for (pensamento of listaPensamentos; track pensamento)
Se pensamento for um objeto, isso pode causar problema.
Recomendo usar o track pensamento.id ou definir uma função trackBy no TS.
Exemplo:
@for (pensamento of listaPensamentos; track pensamento.id) {
<div>
<app-pensamento [pensamento]="pensamento"></app-pensamento>
</div>
}
5. Confirme se o listaPensamentos está sendo carregado
Mesmo com a sintaxe correta, se listaPensamentos estiver vazio ou undefined, não vai renderizar nada.
Verifique no listar-pensamento.component.ts se você está inicializando corretamente:
listaPensamentos: Pensamento[] = [];
ngOnInit() {
this.service.listar().subscribe(lista => {
this.listaPensamentos = lista;
});
}
Código corrigido
<section class="container">
<header class="header d-flex">
<h2 class="ff-inter">Meu Mural</h2>
<button routerLink="/criarPensamento" class="botao">Adicionar pensamento</button>
</header>
@if (listaPensamentos.length > 0) {
<div class="mural">
@for (pensamento of listaPensamentos; track pensamento.id) {
<div>
<app-pensamento [pensamento]="pensamento"></app-pensamento>
</div>
}
</div>
} @else {
<div class="ff-inter sem-pensamentos">
<p>Ainda não há pensamentos cadastrados!</p>
</div>
}
</section>
Faça as correções e veja se está tudo OK, não tenho muito conhecimento em Angular, mas talvez isso possa ajudar
