1

Fala Galera! Minha dúvida é a seguinte:

  • imaginem uma DIV que dentro dela existam vários componentes como o exemplo abaixo:
<div class="row">
      <app-fogao></app-fogao>
    
        <app-geladeira></app-geladeira>
    
        <app-notebook></app-notebook>
    
        <app-ar-condicionado></app-ar-condicionado>
    
        <app-televisao></app-televisao>
    
        <app-celular></app-celular>
    
        <app-maquina-lavar></app-maquina-lavar>
    
    </div>

E ai eu queira ordenar a exibição destes componentes conforme a ordem que eu receber do backend, algo do tipo abaixo:

    let ordemProdutos = [
      {produto: 'fogao' , posicao: 3},
      {produto: 'geladeira' , posicao: 5},
      {produto: 'notebook' , posicao: 1},
      {produto: 'ar-condicionado' , posicao: 4},
      {produto: 'televisao' , posicao: 2},
      {produto: 'celular' , posicao: 7},
      {produto: 'maquina-lavar' , posicao: 6}
    ];

E então a exibição dos componentes que inicialmente ficariam igual ao trecho 01, fosse alterada para ficar igual o trecho abaixo (conforme a ordem recebida acima):

<div class="row">
  <app-notebook></app-notebook>

  <app-televisao></app-televisao>
  
  <app-fogao></app-fogao>
  
  <app-ar-condicionado></app-ar-condicionado>
  
  <app-geladeira></app-geladeira>

  <app-maquina-lavar></app-maquina-lavar>
  
  <app-celular></app-celular>

    </div>

Alguém tem ideia de como fazer essa ordenação dos componentes dinamicamente?

OBS.: Esta é uma forma de demonstrar o problema que eu tenho. os componentes reais não possuem estes nomes. Não pude criar uma componente genérico porque cada um deles são completamente diferentes em termos de conteúdo e estrutura. Eles são exibidos lado a lado e eu preciso criar uma forma de ordená-los de acordo com o posicionamento que cada componente possui gravado no backend.

0

1 Resposta 1

1

O melhor seria primeiro ordenar sua lista

ordemProdutosOrdenada = ordemProdutos.sort((a,b)=> a.posicao - b.posicao)

ai vc pode usar o ngComponentOutlet dentro de um ngfor pra instaciar seus componentes dinamicamente

<ng-container *ngComponentOutlet="produto.produto"></ng-container>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .