Вы можете сделать это с row
и col
следующим образом:
<div class="row">
<div class="col-4">Name 1</div>
<div class="col-4">Name 2</div>
<div class="col-4">Name 3</div>
</div>
<div class="row">
<div class="col-4">Name 5</div>
<div class="col-4">Name 6</div>
<div class="col-4">Name 7</div>
</div>
<div class="row">
<div class="col-4">Name 8</div>
<div class="col-4">Name 9</div>
<div class="col-4">Name 0</div>
</div>
или вы можете использовать ngFor
таким образом
<div class="row">
<div class="col-4" *ngFor="let user of Users">
{{user.name}}
</div>
</div>
Если вы хотитечтобы отображать 3 элемента в каждом столбце, вы должны изменить структуру Array на что-то вроде:
export Class User {
public name1: string;
public name2: string;
public name3: string;
}
, тогда ваш User[]
будет выглядеть так:
this.myUserList:User[] = [
{
name1 = "Mark",
name2 = "John",
name3 = "Matt",
},
{
name1 = "Mark1",
name2 = "John1",
name3 = "Matt1",
},
{
name1 = "Mark2",
name2 = "John2",
name3 = "Matt2",
}
];
наконец, ваша ngFor будетбыть таким
<div class="row">
<div class="col-4" *ngFor="let user of Users">
{{user.name1}}{{user.name2}}{{user.name3}}
</div>
</div>