我有 2 個帶有資料的物件，我需要在 html 中重構渲染。在這張圖片中 是我得到的，但在第二張圖片中是我需要獲得的。黑框是articles物件的*ngFor，分別紅框是*ngFor adsContainer物件
<div *ngFor="let article of articles; let i = index;">
<mat-card class="card">
<div>
<a class="title">
{{article.title}}
</a>
<a>
<p>{{article.content}}</p>
</a>
</div>
</mat-card>
<div class="container" *ngIf="(i % 7) === 6">
<div *ngFor="let data of adsContainer">
<div>
<h1>{{data.value}}</h1>
</div>
</div>
</div>
</div>
public adsContainer: any = [
{ id: '1', value: 'text value here' },
{ id: '2', value: 'text value here' },
{ id: '3', value: 'text value here' }
]
public articles: any = [
{ id: '1', title: 'title value here', content: 'content here' },
{ id: '2', title: 'title value here', content: 'content here' },
{ id: '3', title: 'title value here', content: 'content here' },
........
{ id: '20', title: 'title value here', content: 'content here' },
]
uj5u.com熱心網友回復：
您的問題是您在回圈中添加廣告容器
<div class="container" *ngIf="(i % 7) === 6">
<!-- this loop here -->
<div *ngFor="let data of adsContainer">
<div>
<h1>{{data.value}}</h1>
</div>
</div>
</div>
你想要的是一次只添加一個廣告容器，為了做到這一點，你必須移動回圈
為了顯示這三個廣告，您必須進行一些數學運算才能從文章索引中獲取廣告索引
像這樣：
<div class="container" *ngIf="(i % 7) === 6">
<div>
<h1>{{adsContainer[mathFloor(i / 7)].value}}</h1>
</div>
</div>
請注意，Math在 angular 模板中不可用，您必須將 floor 重新定義為組件方法
function mathFloor(val) {return Math.floor(val)}
uj5u.com熱心網友回復：
嘗試直接使用陣列，同樣當你呼叫 adsContainer[(parseInt(i / 6)-1)% adsContainer.length 時，它總是會重新啟動索引：
<div *ngFor="let article of articles; let i = index;">
<mat-card class="card">
<div>
<a class="title">
{{article.title}}
</a>
<a>
<p>{{article.content}}</p>
</a>
</div>
</mat-card>
<div class="container" *ngIf="(i % 7) === 6">
<div>
<div>
<h1>{{adsContainer[(parseInt(i / 6)-1)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392325.html
標籤：javascript 有角的
上一篇：用戶注冊時如何在警報中顯示自動生成的（在資料庫中）主鍵accountNumber？Angular（前端）和web-api（后端）