在组中显示角度2数据

时间:2018-01-29 00:00:11

标签: angular

我有一个有角度的2应用程序,我希望以3个为一组显示客户评论,每个组都是滑块的一部分,因此您可以浏览所有评论。我不确定如何将这些分组。我可以设法显示前3个,但我不知道如何让后续的3组工作。我的代码目前看起来像这样:

<ng-container *ngFor="let review1 of businessReviews.list; let index2=index">
    <div class="slide">
        <div class="row">
            <ng-container *ngFor="let review of businessReviews.list; let index=index">
                <ng-container *ngIf="(index) < 3">
                    <div class="col-md-4">
                        <div class="review">
                            {{review.text}}
                        </div>
                    </div>
                </ng-container>
            </ng-container>
        </div>
    </div>
</ng-container>

我非常确定我需要在ngIf中添加一些内容来比较外循环和内循环,但我不确定我需要添加什么。

1 个答案:

答案 0 :(得分:1)

我建议尝试将数组格式化为打字稿中的组,而不是尝试使用angular指令。

分组示例:

var groupedList = [];
[1,2,3,4,5].forEach((num, i, arr)=>{
  if(i % 3 == 0) groupedList.push([]);
  groupedList[groupedList.length-1].push(num);
});

console.log(groupedList);

然后在你的HTML ....

<ng-container *ngFor="let group of groupedList; let index=index">
    <div class="col-md-4">
      <div class="review" *ngFor="let review of groupedList[i];">
        {{review.text}}
      </div>
    </div>
</ng-container>

现在我们迭代analyzeList,然后在里面迭代每个评论。