Analise o código abaixo que demonstra um trecho de interface...
<ion-list> <ion-item *ngFor="let item of items" (click)="onItemClick(item)"> <ion-label>{{ item.name }}</ion-label> <ion-note slot="end">{{ item.quantity }}</ion-note> <ion-icon slot="end" [name]="item.icon"></ion-icon> </ion-item> </ion-list> <ion-text *ngIf="items.length === 0"> Não há itens na lista. </ion-text>
Sobre o funcionamento e resultado desse código, analise as assertivas abaixo:
I. A diretiva ngFor é usada para iterar sobre a lista de itens e renderizar um componente ion-item com a concatenação de todos eles.
II. Ao clicar em um item, será acionado um método que tem como parâmetro o objeto do item selecionado com seus dados.
III. A diretiva ngIf serve para exibir um texto informando que a lista está vazia caso não haja nenhum item na lista.
IV. Na tag <ion-icon> será exibido um ícone que pode ser adicionado através de diferentes bibliotecas, tais como Ionicons e FontAwesome, indicando-se apenas o nome do ícone, sem inserção de uma imagem específica.
Quais estão corretas?
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
Alternativa correta: D - Apenas II, III e IV.
A questão pede para analisarmos um trecho de código do framework Ionic, que utiliza Angular para a construção de interfaces. O Ionic é muito usado para desenvolver aplicações móveis com base em tecnologias web.
A assertiva I está incorreta, pois a diretiva *ngFor não concatena os itens, ela apenas itera sobre a lista de objetos 'items', criando um ion-item para cada elemento presente na lista. Cada ion-item é renderizado individualmente com as informações do item específico ao qual ele corresponde.
A assertiva II está correta. Ao usar (click)="onItemClick(item)", o código especifica que um clique em um ion-item acionará o método onItemClick() com o objeto do item clicado como argumento, permitindo que o método aja sobre os dados daquele item específico.
A assertiva III também está correta. A diretiva *ngIf verifica se a condição é verdadeira. Nesse caso, ela checa se items.length === 0. Se a lista 'items' estiver vazia, a condição se torna verdadeira e o texto "Não há itens na lista." será exibido.
Finalmente, a assertiva IV está correta. O uso de <ion-icon [name]="item.icon"></ion-icon> indica que um ícone correspondente à propriedade 'icon' do item será exibido. O Ionic integra com bibliotecas de ícones como Ionicons, e portanto não é necessário inserir uma imagem específica, mas apenas referenciar o nome do ícone desejado.
Portanto, a alternativa D é a correta, pois as assertivas II, III e IV descrevem corretamente o funcionamento do código apresentado.
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo
Conheça nossos planos