Bootstrap 4 + Angular 7: Soronként kétoszlopos megjelenítés

Bootstrap 4 + Angular 7: Soronként kétoszlopos megjelenítés
2019-03-26T13:48:31+01:00
2019-03-26T15:49:00+01:00
2022-10-15T21:30:56+02:00
VaMa
Sziasztok!

Van egy listám, amit szeretnék megjeleníteni soronként 2 elemmel Angular és Bootstrap segítségével, de valahogy sehogysem akar ez összejönni.

Van a listám:

projects: Project[] = [ {id: 1, src: 'https://www.youtube.com/watch?v=HIgSxejHlbw' , thumb: 'randivonal.jpg', caption: 'Randivonal - Ismerkedj okosabban!', row: 1, index: 0}, {id: 2, src: 'https://www.youtube.com/watch?v=7_EbtVgT6CA' , thumb: 'manaky.jpg', caption: 'Manaky - Bloodshed', row: 1, index: 1}, {id: 3, src: 'link' , thumb: 'roy_es_adam_trio.jpg', caption: 'Roy és Ádám Trió: Szex és Budapest (Official Music Video)', row: 2, index: 2}, {id: 4, src: 'link' , thumb: 'roka.jpg', caption: 'RÓQA x TINK - RÍMSUGÁRÚT XX official trailer', row: 2, index: 3}, {id: 5, src: 'link' , thumb: 'kek_ora.jpg', caption: 'Kék óra (Blue hour) - teaser', row: 3, index: 4}, {id: 6, src: 'link' , thumb: 'szent_gyorgy.jpg', caption: 'Jelentkezz a Szent Györgybe!', row: 3, index: 5}, {id: 7, src: 'link' , thumb: 'giftshow.jpg', caption: 'GIFTSHOW Bemutató - Grillcsirkés videó', row: 4, index: 6}, {id: 8, src: 'link' , thumb: 'lili.jpg', caption: 'Lili (documentary) - Trailer / Dir.:Regős Ábel / [ENG SUB]', row: 4, index: 7}, {id: 9, src: 'link' , thumb: 'sika.jpg', caption: 'Sika - Short film trailer', row: 5, index: 8}, {id: 10, src: 'link' , thumb: 'hold_on.jpg', caption: 'Dembugz - Hold On', row: 5, index: 9}, {id: 11, src: 'link' , thumb: 'gyemant.jpg', caption: 'Gyémánt by Budapest Voices (Kimnowak) -OFFICIAL MUSIC VIDEO- 2K', row: 6, index: 10}, {id: 12, src: 'link' , thumb: 'rimsugarut.jpg', caption: 'RÓQA X TINK - Rímsugárút', row: 6, index: 11}, {id: 13, src: 'link' , thumb: 'nobodys_hungary.png', caption: '// #NOBODY’S HUNGARY Sequence //', row: 7, index: 12}, {id: 14, src: 'link' , thumb: 'herewego.jpg', caption: 'HERE WE GO by Martina Király (OFFICIAL MUSIC VIDEO)', row: 7, index: 13}, {id: 15, src: 'link' , thumb: 'voice.jpg', caption: 'Budapest Voices - By The Way (Red Hot Chili Peppers cover)', row: 8, index: 14}, {id: 16, src: 'link' , thumb: 'megyek_szavazni.jpg', caption: 'Megyek szavazni! Csinálok egy X-et! #vászontáska', row: 8, index: 15}, {id: 17, src: 'link' , thumb: 'work_project.jpg', caption: 'Wörk Projekt - Ritmus, Sport, Gimnasztika', row: 9, index: 16}, {id: 18, src: 'link' , thumb: 'memories_sequence.jpg', caption: '█Memories Sequences█', row: 9, index: 17}, ];
És van a HTML-es megjelenítésem. Itt lesz valahol a gond:

<div class="row container-project-box" *ngFor="let project of projects; let i = index">
<div class="col-sm-6" class="left-style" *ngIf="i % 2 == 0">{{projects.caption}}</div>
<div class="col-sm-6" class="right-style" *ngIf="i % 2 != 0">{{projects
.caption}}</div>
</div>

Kérdésem, hogy hogyan lehet ezt átírni, hogy két oszlopban megjelenjen?
Üdv,
V.M.
Mutasd a teljes hozzászólást!
Szia! 
Én inkább így csinálnám, ha a left és a right-style csak azt szabályozza melyik oldalon jelenjen meg:

<div [ngClass]="{'col-sm-6 float-left': i % 2 === 0, 'col-sm-6 float-right' : i%2 !== 0}"> {{project.caption}} </div>
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd