[英]Angular: Insert new .row on ngFor condition
I'm new to Angular so I decided to try their tutorial, but with some small alterations. 我是Angular的新手,所以我决定尝试他们的教程,但是做了一些小的改动。 Basically I have the following array: 基本上我有以下数组:
export const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
And the objective is to list them on screen using *ngFor, so I looked up for some ways to do it and this was the most logical thing for me to do, but it's not working. 而且目标是使用* ngFor在屏幕上列出它们,因此我寻找了一些方法来执行此操作,这对我来说是最合乎逻辑的事情,但它不起作用。
<div class="container-fluid bg-secondary padding-sm margin-sm rounded">
<div class="row">
<div *ngFor="let hero of heroes; let index = index">
<div class="col-lg-4 bg-lightblue rounded">
<p class="text-secondary lead">
<span class="text-info text-uppercase lead font-weight-bold">
{{ hero.name}}
</span>
Details
</p>
<p>
<span class="font-weight-bold text-success">
ID:
</span>
{{ hero.id }}
</p>
<p>
<span class="font-weight-bold text-success">
Name:
</span>
{{ hero.name }}
</p>
<label class="font-weight-bold">Change name:
<input [(ngModel)]="hero.name" class="input-md" type="text" placeholder="name">
</label>
</div>
{{ (index + 1) % 3 }}
<div class="row" *ngIf="(index + 1) % 3 == 0"></div>
</div>
</div>
</div>
What I'm attempting to do is to start cycling through the list and when it reaches 3 columns, it adds a row by checking if (index + 1) % 3 equals 0 and continues adding columns on the next row. 我试图做的是开始循环浏览列表,当列表达到3列时,它通过检查(index + 1)%3是否等于0来添加一行,并继续在下一行添加列。 Right now it's not adding the row when the condition in ngIf is true. 现在,当ngIf中的条件为true时,它不会添加行。 What am I doing wrong? 我究竟做错了什么?
declare heroes
and update it as you want to display in HTML ie 3 columns in a row 声明heroes
并按需要显示在HTML中进行更新,即连续3列
heroes = [];
HEROES.forEach((hero, index) => {
if(index % 3 == 0) {
let row = [];
row.push(hero);
this.heroes.push(row);
} else {
this.heroes[this.heroes.length - 1].push(hero);
}
});
it will generate heroes
as: 它将产生如下heroes
:
[
[ { "id": 11, "name": "Mr. Nice" }, { "id": 12, "name": "Narco" }, { "id": 13, "name": "Bombasto" } ],
[ { "id": 14, "name": "Celeritas" }, { "id": 15, "name": "Magneta" }, { "id": 16, "name": "RubberMan" } ],
[ { "id": 17, "name": "Dynama" }, { "id": 18, "name": "Dr IQ" }, { "id": 19, "name": "Magma" } ], [ { "id": 20, "name": "Tornado" } ]
]
then you can update HTML as you want. 那么您可以根据需要更新HTML。
HTML 的HTML
<div class="row" *ngFor="let rowData of heroes">
<div class="col-lg-4 bg-lightblue rounded" *ngFor="let hero of rowData">
<p class="text-secondary lead">
<span class="text-info text-uppercase lead font-weight-bold">{{ hero.name}}</span> Details
</p>
<p>
<span class="font-weight-bold text-success">ID: </span>{{ hero.id }}
</p>
<p>
<span class="font-weight-bold text-success">Name: </span>{{ hero.name }}
</p>
<label class="font-weight-bold">Change name:
<input [(ngModel)]="hero.name" class="input-md" type="text" placeholder="name">
</label>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.