Items richtig listen

Panda9296

Bekanntes Mitglied
Hi und zwar bin ich seit gestern Mittag an einem Problem in angular...wobei ich glaube, dass es an Bootstrap liegen könnte... es geht darum, dass ich items habe, die irgendwie so aufgeteilt werden sollen, dass das erste item auf der linken Seite landet, dass zweite dann auf der rechten Seite und so weiter:

Java:
<header>
  <h2 style="text-align: center">Books</h2>
</header>
<body>
  <div class="container" *ngFor="let item of books;let i =index">
    <div class="row">
      <div class="col" *ngIf="i%2===0">
        <app-book-cardcomponent (click)="pushItemToSelect(item)"

                                [title]="item.title"
                                [author]="item.author"
                                [details]="item.details">
        </app-book-cardcomponent>
      </div>
      <div class="col" *ngIf="i%2!==0">
        <app-book-cardcomponent (click)="pushItemToSelect(item)"

                              [title]="item.title"
                              [author]="item.author"
                              [details]="item.details">

        </app-book-cardcomponent>
      </div>
    </div>

    </div>

</body>
ich hatte die Idee das mit ngIf zu machen.. items ein und ausblenden, je nach dem, ob das Argument true oder false ergibt... soweit so cool nur leider ist meine row dazwischen... das Ergebnis ist dann dass das erste item auf der linken seite angezeigt wird das zweite Item zwar auf der rechten Seite, allerdings in der nächsten Zeile, da ja die row nicht ausgeblendet wird und auch nicht ausgeblendet werden kann, da sie in dem Layout ja für die linke Seite benötigt wird:D pu das ist echt mies... gibt es eine bessere Lösung? im Form von einem Layout, womit ich die Idee vll so umsetzen kann?Ich hatte auch schon die Idee einfach 2 rows mit 50% breite zu nehmen, aber dann passt das layout nicht mehr
 

thecain

Top Contributor
Das brauchst du doch gar nicht... einfach ein ngFor und die css-klasse col-6 auf items

HTML:
 <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
 

Neue Themen


Oben