Question

我是Angular的新用户我想在5个项目中添加class="row"如何在父div中使用数组索引，这样我可以使用[ngClass]="{row:index%5===0}

<div class="grid-on">
    <div [ngClass]="{row:index%5===0}`>
        <div class="col-1-of-5" *ngFor="let category of categories;let index=index">
            <div class="item-box">
                <img src={{category.imagePath}} alt="" class="item box__img">
                <h3 class="heading-quaternary">{{category.name}}</h3>
                <p>{{category.description}}</p>
            </div>
        </div>
    </div>
</div>

Answer 1

如果你遍历所有类别，你会得到每个类别的div，有些会有行类，有些则不会。我想你想要的是为每五个类别获得一个带有行类的div。那么对我来说最好的方法是计算typescript中需要的行数，并设置一个数组，其中行数作为数组的元素。然后你可以使用该数组来循环使用行类的div。然后，为了获得每行的五个元素，您可以编写一个方法，该方法仅根据带有行类的div的索引返回五个元素。如果index为0则将类别[0]返回到类别[4]，如果将类别[5]返回到类别[9]，依此类推。请看下面的代码：

TypeScript中的

：

rowNumber: number[];
      constructor() {
        this.rowNumber = [];
        for (let i = 0; i < this.categories.length / 5; i++) {
          this.rowNumber.push(i);
        }
      }

      getCurrentCategories(currentIndex) {
        let item = [];
        let firstIndex = currentIndex * 5;
        for (let i = 0; i < 5; i++) {
          let nextIndex = firstIndex + i;
          if (this.categories[nextIndex]){
            item.push(this.categories[nextIndex]);
          }
        }
        return item;
      }

在html中：

    <div class="row" *ngFor="let row of rowNumber; let i=index">
        <div class="col-1-of-5 u-margin-t-small" *ngFor="let category of getCurrentCategories(i)">
            <div class="item-box">
                <img src={{category.imagePath}} alt="" class="item-box__img">
                <h3 class="heading-quaternary">{{category.name}}</h3>
                <p>{{category.description}}</p>
            </div>
        </div>
    </div>

请注意，可以在获取categories数组的任何方法中设置rowNumber。但为了简单起见，我只是在构造函数中设置它。

Answer 2

试试这个

<div class="grid-on">
    <div class="col-1-of-5" *ngFor="let category of categories;let index=index" [ngClass]="{row:index%5===0}`>
         <div class="item-box">
           <img src={{category.imagePath}} alt="" class="item box__img">
           <h3 class="heading-quaternary">{{category.name}}</h3>
           <p>{{category.description}}</p>
         </div>
     </div>
</div>

为角度js

2 个答案: