我正在努力用* ngFor循环显示我的数据。 我希望ngFor每行显示3个数据。我尝试索引。但后来只有1件/行。
"elasticloadbalancing:DeregisterTargets",
"elasticloadbalancing:Describe*", "elasticloadbalancing:Describe*",
"elasticloadbalancing:RegisterInstancesWithLoadBalancer", "elasticloadbalancing:RegisterInstancesWithLoadBalancer",
"elasticloadbalancing:RegisterTargets" "elasticloadbalancing:RegisterTargets",
"logs:CreateLogGroup",
"logs:CreateLogStream",
"logs:DescribeLogStreams",
"logs:PutSubscriptionFilter",
"logs:PutLogEvents"
我将非常感谢您的帮助。我正在使用
<div class="container">
<div class="row">
<div class="mb-3 card-deck text-center">
<div class="card mb-4 box-shadow" *ngFor="let product of item.product;">
<div class="card-header">
<h4 class="my-0 font-weight-normal">{{ product.name }}</h4>
</div>
<div class="card-body">
<img src="{{ product.imagePath}}" class="img-thumbnail" alt="{{ product.name }}">
<p class="lead">{{ product.msg }} {{ product.msg2 }}</p>
<a role="button" class="btn btn-lg btn-block btn-primary" routerLink="product-details">More...</a>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
您可以使用Bootstrap CSS类每行显示3个项目
具有与html文件类似的结构
<div class="row">
<div class="col-4 col-sm-4 col-md-4 col-lg-4" *ngFor="let product of item.products">
{{product.name}} | {{product.imagePath}} | {{product.msg2}} <!-- display product data -->
</div>
</div>
答案 1 :(得分:1)
您只需将逻辑放在index
上,如下所示:
<div *ngFor="let item of items; let i = index">
<div *ngIf="i % 3 == 0" class="row">
{{ item }}
<div *ngIf="i + 1 < items.length">{{ items[i + 1] }}</div>
<div *ngIf="i + 2 < items.length">{{ items[i + 2] }}</div>
</div>
</div>