我正在使用ngFor重复卡片以在不同的卡片中显示不同的数据， 但是不管水平还是垂直...
就像我越来越..
CARD1 卡2 卡3 卡4
我想要的是
卡1卡2卡3
CARD4 CARD5 CARD6
............................................... ................................................... ................................................... ................................................... ................................................... ................................................... ................................................... ....................................
<app-header></app-header>
<div class="jumbotron jumbotron-billboard">
<!-- <div class="card-header col-12">
<div class="col-3">
<img src="assets\dist\img\walmart-logo.jpg" alt="Avatar" style="width:40px">
<p class="waltmart">WALTMART</p>
</div>
<div class="col-3" style=" margin-left: 14%;
margin-top: -3%">
<img src="assets\dist\img\NCR-Logo.jpg" alt="Avatar" style="width:40px">
<p class="ncr">NCR CORPORATION</p>
</div>
<div class="col-3" style=" MARGIN-LEFT: 34%;
MARGIN-TOP: -3%;">
<img src="assets\dist\img\hungry.png" alt="Avatar" style="width:40px">
<p class="hungry">HUNGRY JACKES</p>
</div>
<div class="col-3" style=" margin-left: 53%;
margin-top: -3%;">
<img src="assets\dist\img\ahold.png" alt="Avatar" style="width:40px">
<p class="ahold">AHOLD-DELHAIZE</p>
</div>
<div class="col-3" style=" margin-left: 73%;
margin-top: -3%;">
<img src="assets\dist\img\NCR-Logo.jpg" alt="Avatar" style="width:40px">
<p class="customer">NCR CORPORATION</p>
</div>
</div> -->
<div class="col-12">
<!-- CARDS -->
<div class="card-col-3 first-card" style="width: 32%;
padding-bottom: 1%; margin-left: -2%;background-color: rgba(245, 245, 245, 0.4);margin-top: 1%;">
<div class="card-header">
<p class="stor1" style="FONT-SIZE: 11PX;
FONT-WEIGHT: 900;
COLOR: WHITE;
MARGIN-LEFT: 40%;">{{Event_count}}</p>
</div>
<div class="chart" style=" margin-left: -9%;">
<canvas baseChart
[data]="pieChartData"
[labels]="pieChartLabels"
[chartType]="pieChartType"
[options]="pieChartOptions"
[plugins]="pieChartPlugins"
[legend]="pieChartLegend"
[colors]="donutColors"
>
</canvas>
</div>
<div class="card bg-light mb-3" style="max-width: 25rem;
margin-left: 46%;
margin-top: -26%;">
<div class="card-header" style="background-color:#54B948;">Header</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;
color: #54B948;"></i>
<span class="badge badge-primary badge-pill">20</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:#0099BF;"></i>No of Incidents
<span class="badge badge-primary badge-pill">10</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:red;"></i>Events Critical
<span class="badge badge-primary badge-pill">9</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:yellow;"></i>No of Incidents
<span class="badge badge-primary badge-pill">15</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-col-4 first-card" style="width: 32%;
padding-bottom: 1%;
margin-left: 32%;
margin-top: -15%;
background-color: rgba(245, 245, 245, 0.4);">
<div class="card-header">
<p class="stor1" style="FONT-SIZE: 11PX;
FONT-WEIGHT: 900;
COLOR: WHITE;
MARGIN-LEFT: 40%;">STORE 2</p>
</div>
<div class="chart" style=" margin-left: -9%;">
<canvas baseChart
[data]="pieChartData1"
[labels]="pieChartLabels"
[chartType]="pieChartType"
[options]="pieChartOptions"
[plugins]="pieChartPlugins"
[legend]="pieChartLegend"
[colors]="donutColors"
>
</canvas>
</div>
<div class="card bg-light mb-3" style="max-width: 25rem;
margin-left: 46%;
margin-top: -28%!important;">
<div class="card-header" style="background-color:#54B948;">Header</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;
color:#54B948;"></i>No of Incidents
<span class="badge badge-primary badge-pill">4</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:#0099BF;"></i>No of Incidents
<span class="badge badge-primary badge-pill">25</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:red"></i>Events Critical
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:yellow"></i>No of Incidents
<span class="badge badge-primary badge-pill">10</span>
</li>
</ul>
</div>
</div>
</div>
<div class="card-col-4 first-card" style="width: 32%;
padding-bottom: 1%;
margin-left: 67%;
margin-top: -15%!important;
background-color: rgba(245, 245, 245, 0.4);">
<div class="card-header">
<p class="stor1" style="FONT-SIZE: 11PX;
FONT-WEIGHT: 900;
COLOR: WHITE;
MARGIN-LEFT: 40%;">STORE 1</p>
</div>
<div class="chart" style=" margin-left: -9%;">
<canvas baseChart
[data]="pieChartData2"
[labels]="pieChartLabels"
[chartType]="pieChartType"
[options]="pieChartOptions"
[plugins]="pieChartPlugins"
[legend]="pieChartLegend"
[colors]="donutColors"
>
</canvas>
</div>
<div class="card bg-light mb-3" style="max-width: 25rem;
margin-left: 46%;
margin-top: -28%;">
<div class="card-header" style="background-color:#54B948;">Header</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;
color: #54B948;"></i>Critical events
<span class="badge badge-primary badge-pill">11</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:#0099BF;"></i>No of Incidents
<span class="badge badge-primary badge-pill">19</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:red;"></i>Events Critical
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:yellow;"></i>No of Incidents
<span class="badge badge-primary badge-pill">18</span>
</li>
</ul>
</div>
</div>
</div>
<div class="card-col-4 first-card" style="width: 32%;
padding-bottom: 1%;
margin-left: -1%;
margin-top: 4%;
background-color: rgba(245, 245, 245, 0.4);">
<div class="card-header">
<p class="stor1" style="FONT-SIZE: 11PX;
FONT-WEIGHT: 900;
COLOR: WHITE;
MARGIN-LEFT: 40%;">STORE 4</p>
</div>
<div class="chart" style=" margin-left: -9%;">
<canvas baseChart
[data]="pieChartData3"
[labels]="pieChartLabels"
[chartType]="pieChartType"
[options]="pieChartOptions"
[plugins]="pieChartPlugins"
[legend]="pieChartLegend"
[colors]="donutColors"
>
</canvas>
</div>
<div class="card bg-light mb-3" style="max-width: 25rem;
margin-left: 46%;
margin-top: -26%;">
<div class="card-header" style="background-color:#54B948;">Header</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;
color: #54B948;"></i>Multiple Occurence
<span class="badge badge-primary badge-pill">9</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:#0099BF;"></i>No of Incidents
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:red;"></i>Events Critical
<span class="badge badge-primary badge-pill">44</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-dot-circle-o" style="font-weight: 900;color:yellow;"></i>No of Incidents
<span class="badge badge-primary badge-pill">10</span>
</li>
</ul>
</div>
</div>
</div>
</div>