输出一个在Angular中每行有多张卡片的数组
输出一个在Angular中每行有多张卡片的数组
提问于 2021-09-28 16:46:11
我从get请求接收JSON，并将其传递给数组
stnArray: [{ Station: string; StnRef: string; }] =[{Station:"Station", StnRef:"Station Reference"}]我希望在DOM中每行输出2到3张卡片，但是在我的HTML中使用下面的代码只能得到每行一张。
<div class='row wow fadeInUp' *ngFor='let index of stnArray;; let i = index; let even = even'>
<span *ngIf="even">
<div class='col-md-3 pull-left' *ngIf="stnArray[i+1]">
<div class="card-deck"
style="cursor: pointer"
(click)="updateStationRef(i)">
<div class="card-block">
<h4 class="card-title">
{{stnArray[i].Station}}</h4>
<p class="card-text"> ({{stnArray[i].StnRef }}) </p>
</div>
</div>
</div>
<div class='col-md-3 pull-right' *ngIf="stnArray[i+1]">
<div class="card-deck"
style="cursor: pointer"
(click)="updateStationRef(i+1)">
<div class="card-block">
<h4 class="card-title">
{{stnArray[i+1].Station}}</h4>
<p class="card-text"> ({{stnArray[i+1].StnRef }}) </p>
</div>
</div>
</div>
</span>
</div>
回答 1
Stack Overflow用户
发布于 2021-09-28 16:56:30
可以使用angular的*ngFor指令。它会自动迭代数组，在这种情况下会很有用。
基本示例如下所示。
<div *ngFor="let item of items">{{item.name}}</div>在本例中，items是一个对象数组。ie {name：'Michael'}，{name：'Bharat'}
请参考以下给定的链接：
https://blog.angular-university.io/angular-2-ngfor/ https://mdbootstrap.com/support/angular/multiple-cards-using-ngfor/
我希望，它回答了您的问题:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69365600
复制相关文章
相似问题
腾讯云开发者
