Possuo uma propriedade elemento$
dentro do meu componente, cujo tipo é Observable<Objeto[]>
. Usei a diretiva *ngFor
pra acessar os dados individualmente e os mostrar na tela:
<ul>
<li *ngFor="let elemento of elemento$ | async">
<p>{{elemento.mensagem}}</p>
</li>
</ul>
Ao concretizar a atividade, precisei inserir uma tag que não deve aparecer quando acesso o primeiro elemento do array, o que resolvi assim:
<ul>
<li *ngFor="let elemento of elemento$ | async; let i = index">
<div *ngIf="!!i">isto não deve aparecer no primeiro elemento</div>
<p>{{elemento.mensagem}}</p>
</li>
</ul>
Ao terminar isso, tive que criar também um campo que não pode ficar visível para o último elemento do laço de repetição:
<ul>
<li *ngFor="let elemento of elemento$ | async; let i = index">
<div *ngIf="!!i">isto não deve aparecer no primeiro elemento</div>
<p>{{elemento.mensagem}}</p>
<div>isto não deve aparecer no último elemento</div>
</li>
</ul>
Para resolver isso, usei o seguinte código:
<div *ngIf="i != ((elemento$ | async).length - 1)">isto não deve aparecer no último elemento</div>
Mas acredito não ser a forma ideal de fazer isso. Há uma forma de fazer isso usando as propriedades da própria diretiva *ngFor
(ex: *ngfor="let x of y; let total = length"
)?