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?
<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?