我對 Angular 不是很熟悉。我想要一個像這樣的網格：
即每行有一個影像與兩個影像交替。我嘗試使用這段代碼，但我得到了一個稍微不同的網格（我也得到了兩次相同的影像，因為我不知道如何增加回圈內的索引）：
.html：
<ion-content>
<ion-grid class="design">
<ion-row size="12" *ngFor="let t of types ; let i=index">
<ion-col *ngIf="i%3==0" size="12">
<img oncontextmenu="return false;" src={{t?.img}} class="center" />
</ion-col>
<ion-col *ngIf="i%3!=0" size="6">
<img oncontextmenu="return false;" src={{t?.img}} class="center" />
</ion-col>
<ion-col *ngIf="i%3!=0" size="6">
<img oncontextmenu="return false;" src={{types[i 1]?.img}} class="center"/>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
.scss：
.design {
position: center;
width: 90%;
height: 90%;
margin-left: auto;
margin-right: auto;
}
.center {
display: block;
width: 100%;
}
我怎么能修改它？
uj5u.com熱心網友回復：
您需要將行包裝在ion-rowelement 中，并將所有內容包裝在 中ion-grid，然后您可以將其ion-col用于每一列。這是全寬元素和 2 列行的簡單示例：https : //stackblitz.com/edit/ionic-yxpfht?file=pages/home/home.ts
你也可以參考官方檔案，因為有一個很好的例子以及如何使用網格。此外，您可能想要操縱間距/裝訂線，檔案中對此進行了說明。
如果你有你的影像陣列，像這樣 `['img1', 'img2', 'img3'] 你可能想檢查你是否有 3 來顯示它們 2 1 （第一行有 2 個，第 1 行有 1 個）第二），所以你可以使用類似stackblitz示例的東西。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406499.html
標籤：
上一篇：如何在DUnitX和Spring4D1.2.2中使用var引數模擬方法呼叫
下一篇：反應式表單驗證問題