Question

我使用Materialize.css和Angular 2x和Id就像每2个卡列一样。它目前显示json文件中的第一辆和第三辆汽车。希望它展示第一辆和第二辆车并突破新的一排并显示第三和第四。感谢任何帮助。

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， “名称”：“KOENIGSEGG AGERA R”， “价格”：170万， “速度”：“273英里每小时”， “形象”： “汽车-1” }， { “id”：2， “名字”：“轩尼诗VENOM GT”， “价格”：410500，
“速度”：“270英里每小时”， “形象”：“汽车2” }， { “id”：3， “名字”：“BUGATTI VEYRON SUPER SPORT”， “价格”：395000， “速度”：“273英里每小时”， “形象”： “汽车-3” }， { “id”：4， “名称”：“9FF GT9-R”， “价格”：1170000， “速度”：“257 MPH”， “形象”：“车4” } ]

显示什么

解决：我最终在循环外添加了一行，并为图像和内容区域添加了高度和最小高度。

Answer 1

如果您通过reduce运行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">
        ...

Angular 2 - 尝试在每个其他循环迭代中添加行类

1 个答案: