角2 - 他のすべてのループ繰り返しに行クラスを追加しようとしています

Question

Im 2つのカード列ごとに行があるように、Angular 2xとIdを持つMaterialize.cssを使用しています。現在、jsonファイルから1番目と3番目の車が表示されています。第1車と第2車を見せて、新しい列に入り、第3と第4を見せてください。助けをお待ちしています。

HTMLコンポーネント

<app-car *ngFor="let car of cars" [car]="car"> 
     <div *ngIf="car.id%2 !== 0" [ngClass]='"row"'> 
     <div class="card col l6" > 
     <div class="card-image"> 
      <img src="assets/images/{{ car.image }}.jpg" alt="car"> 
     </div> 
     <div class="caption center"> 
      <div *ngIf="!car.showDetails" > 
      <h4> 
       <span class="card-content"> 
       {{ car.name }} 
       </span> 
      </h4> 
      <h5>  
       {{ car.price | currency:'USD':true }} 
      </h5> 

      <button 
       class="btn waves-effect waves-lights blue darken-1" 
       *ngIf="!car.showDetails" 
       (click)="car.showDetails = !car.showDetails"> 
      Show Speed 
      </button> 

      </div> 

      <div *ngIf="car.showDetails"> 
      <div > 
       <p class="card-action">{{ car.speed }}</p> 

      <button 
       class=" btn waves-effect waves-light" 
       (click)="car.showDetails = !car.showDetails"> 
       Close 
       </button> 

      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </app-car> 

JSONファイル [ { "ID"：1、 "名前"： "ケーニグセグAGERA R"、 "価格"：1700000、 "速度"： "毎時273マイル」、 "イメージ"： "車-1" }、 { "ID"：2、 "名前"： "HENNESSEY VENOM GT"、 "価格"：410500、
"スピード"： "毎時270マイル"、 "イメージ"： "車-2" }、 { "ID"：3、 "名前"： "ブガッティ・ヴェイロンスーパースポーツ"、 "価格"：395000、 "速度" "毎時273マイル"、 "イメージ"： "車-3" }、 { "ID"：4、 "名前"： "9FF GT9-R"、 "価格"：117万、 「速度"： "257 MPH"、 "イメージ"：" 車-4" }]

を表示いただきました！

解決済み：ループ外に行が追加され、イメージとコンテンツ領域に高さと最小高さが追加されました。

Answer 1

あなたはこのように、各行の車をグループに削減を通して、あなたのJSONを実行する場合、それは容易になります：行や車を通して、あなたのテンプレートのループで次に

this.carRows = [ 
     { "id": 1, "name": "KOENIGSEGG AGERA R", "price": 1700000, "speed": "273 mph", "image":"car-1" }, 
     { "id": 2, "name": "HENNESSEY VENOM GT", "price": 410500,"speed": "270 mph", "image":"car-2" }, 
     { "id": 3, "name": "BUGATTI VEYRON SUPER SPORT", "price": 395000, "speed": "273 mph", "image":"car-3" }, 
     { "id": 4, "name": "9FF GT9-R", "price": 1170000, "speed": "257 MPH", "image":"car-4" } 
    ] 
    // attach this reduce wherever your data is coming from 
    .reduce((memo, car) => { 
     if (!memo.length) { return memo = [...memo, [car]]; } 

     let lastItem = memo[memo.length-1]; 

     if (lastItem.length < 2) { 
     memo[memo.length-1] = [...lastItem, car]; 
     } else { 
     memo = [...memo, [car]]; 
     } 

     return memo; 
    }, []); 

：

<div *ngFor="let row of carRows" class="row"> 
     <app-car *ngFor="let car of row" [car]="car"> 
     ...