javascript - 如何在 Angular 上为每两个项目创建新的引导行?
问题描述
我想在 ngFor 循环的每个 2 个元素上添加行。但我无法处理它。我有如下的 studentNames 数组
studentNames=[
{
name:"Jonas",
age:22,
number:"1234"
},
{
name:"Mathilda",
age:25,
number:"5432"
},
{
name:"Jacob",
age:20,
number:"4321"
},
{
name:"Ivan",
age:23,
number:"6984"
},
{
name:"Kate",
age:21,
number:"3432"
},
{
name:"James",
age:20,
number:"4312"
},
{
name:"Sean",
age:23,
number:"4321"
},
{
name:"Julia",
age:23,
number:"4321"
},
]
这是我尝试过的
<ng-container *ngFor="let item of studentNames;let i=index">
<div class="row" *ngIf="i%2==0">
<div class="col md-12">
{{item.name}}
</div>
</div>
</ng-container>
仅当索引不均匀时才跳过。在这里我想在下面看到它们(顺序无关紧要,每行应该是 2 x 2)。
Stackblitz 示例:https ://stackblitz.com/edit/bootstrap-wpfukz?file=app%2Fapp.component.html
解决方案
这是一个更“hacky”的方法,但它只是 HTML:
<ng-container *ngFor="let item of studentNames;let i=index">
<div *ngIf="i%2==0">
<div class="row">
<div class="col md-12">
{{studentNames[i].name}}
</div>
<div class="col md-12">
{{studentNames[i + 1].name}}
</div>
</div>
</div>
</ng-container>
推荐阅读
- php - 将一个数字除以 x 个小数位
- javascript - Javascript - 从值数组中查找线段的长度
- r - 如何在 R 中读取数据帧的 setdiff?
- akka - 为 EventSourcedBehaviorTestKit 禁用 Java 序列化
- locust - 如何在 Locust 中配置日志记录?
- elasticsearch - Elasticsearch 应该使用 must_not - 非嵌套
- javascript - 欢迎留言 Discord.js
- python - 检查字符串是否包含连续子字符串的最佳方法?
- java - 如何使用映射器翻译变量类型?(DTO 到 DAO)
- python - 尝试将两个浮点数相加时,我得到一个“TypeError:+= 不支持的操作数类型:'float' 和 'list'”?