1

Vamos ao problema:

Preciso criar uma tabela pelo ionic que, assim como no álbum do instagram, fica dividido em 3 imagens por linha,esse código foi feito pelo angular. Aqui está meu código HTML no ionic:

<ion-content> 
    <h1>Fotos</h1>
  <ion-list> 
    <ion-grid> 

      <ion-item *ngFor="let photo of photos">
          <ion-list id="album">
            <div class="foto"><img src="{{photo.url}}"></div>
          </ion-list>
      </ion-item>
  </ion-grid>

 </ion-list>
</ion-content>

Parte .TS

interface IPhoto {
  albumId: number;
  id: number;
  title: string;
  url: boolean;
  thumbnilUrl: string;
}

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {

  api: string;
  photos: IPhoto[];

  constructor(
  public httpClient: HttpClient
  ) {
    this.api = 'https://jsonplaceholder.typicode.com';

    // Obtenção das fotos da API
    httpClient.get(this.api + '/photos')
      .subscribe((res: IPhoto[]) => {
        console.log(res);
        this.photos = res;
      });
  }}

Meu professor tem a mania de ensinar linguagens que nem ele sabe, e como é o trabalho final, ele não vai me ajudar.

O que eu preciso é de uma forma de transformar esses posts em uma table. Pelo PHP, JavaScript ou C# eu até saberia fazer, mas eu não sei como eu poderia fazer um if dentro do TypeScript para que ele finalizasse uma linha e criasse outra.

Eu pensei em criar uma div no CSS, que criasse uma tabela de tamanho específico que limitasse as fotos, mas não sei se isso funcionaria. Alguém poderia me ajudar?

4
  • 1
    Cara vc pode fazer um ngFor num td dentro de uma tabela e dependo se o indice for multiplo de 3 vc cria uma linha nova Commented 17/07/2019 às 21:22
  • como isso poderia ser feito pelo ngFor @EduardoVargas? Esse comando faz mais do que repetição?
    – HQSantos
    Commented 17/07/2019 às 21:23
  • 1
    o ngFor vc usa pra criar os tds e rastrear o indice ai vc precisa de um ngif pra saber se cria uma linha nova ou não Commented 17/07/2019 às 21:25
  • Então se eu criar um: <ion-row class='row' *ngIf="ion-col<2 then crianova else termina"> e fizer os templates: <ng-template #crianova></ion-row><ion-row></ng-template> <ng-template #termina></ion-row></ng-template> ele iria ler?
    – HQSantos
    Commented 17/07/2019 às 21:39

1 Resposta 1

-1

No ionic quando utilizado o ion-col, tem a propriedade "size" que funciona na mesma forma das colunas do bootstrap.

<ion-col size="2">
          <ion-text>DP</ion-text>
        </ion-col>

1
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 29/07/2022 às 20:24

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 .