[英]Ionic Pattern with Grid and ngFor
so i have this grid structure and i want to repeat this 1,2,3 structure further down the loop enter image description here所以我有这个网格结构,我想在循环中进一步重复这个 1,2,3 结构在此处输入图像描述
I have the following code我有以下代码
<ion-grid *ngFor="let topics of topics;let i = index">
<ion-row *ngIf="i%3 == 0">
<ion-col>
<div class="square-container">
<div class="square2" >
<div class="content" >
<ion-icon *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
<ion-icon *ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
<hr>
</div>
</div>
<p class="pc">{{topics.topics_title}}</p>
</div>
</ion-col>
</ion-row >
<ion-row *ngIf="i % 3 == 1">
<ion-col col-6 col-sm *ngIf="i % 3 == 1">
<div class="square-container">
<div class="square1" >
<div class="content" >
<ion-icon *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
<ion-icon *ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
<hr>
</div>
</div>
<p class="pc2">{{topics.topics_title}}</p>
</div>
</ion-col >
<ion-col col-6 col-sm>
<div class="square-container">
<div class="square1" >
<div class="content" >
<ion-icon *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
<ion-icon *ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
<hr>
</div>
</div>
<p class="pc2">{{topics.topics_title}}</p>
</div>
</ion-col>
</ion-row>
</ion-grid>
The problem is the second row i cant seem to print 2 different topics in the same row.问题是第二行我似乎无法在同一行打印 2 个不同的主题。 Any suggestions on how i can print 2 circles/topics in the same row?
关于如何在同一行打印 2 个圆圈/主题的任何建议?
Managed to solve my problem using mod设法使用 mod 解决了我的问题
<div *ngFor="let topics of topics;let i = index">
<div *ngIf="i%3 == 0 && i==0"class="story_scroll_center">
<div class="story_img_bg" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
<ion-icon color="light" no-margin no-padding text-center class="story_img" *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
<ion-icon color="light" no-margin no-padding text-center class="story_img "*ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
<hr>
<img no-margin no-padding text-center class="story_img" src={{topics.topics_icon}}>
</div>
<p class="story_text">{{topics.topics_title}}</p>
</div>
<!-- <div *ngIf="i%3 == 0 && i > 0" class="square-container">
<br>
<div class="square" >
<div class="content" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
<ion-icon *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
<ion-icon *ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
<hr>
<img src={{topics.topics_icon}}>
</div>
</div>
<p class="story_text">{{topics.topics_title}}</p>
</div> -->
<div *ngIf="i%3 == 0 && i > 0"class="story_scroll_center_sec">
<div class="story_img_bg" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
<ion-icon color="light" no-margin no-padding text-center class="story_img" *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
<ion-icon color="light" no-margin no-padding text-center class="story_img "*ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
<hr>
<img no-margin no-padding text-center class="story_img" src={{topics.topics_icon}}>
</div>
<p class="story_text">{{topics.topics_title}}</p>
</div>
<div *ngIf="i % 3 == 1"class="story_scroll">
<div class="story_img_bg" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
<ion-icon color="light"no-margin no-padding text-center class="story_img" *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
<ion-icon color="light" no-margin no-padding text-center class="story_img "*ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
<hr>
<img no-margin no-padding text-center class="story_img" src={{topics.topics_icon}}>
</div>
<p class="story_text">{{topics.topics_title}}</p>
</div>
<div *ngIf="i % 3 == 2"class="story_scroll_right">
<div class="story_img_bg" [ngStyle]="{'background-color': topics.topics_hide.locked=='false'? '#344955' : '#979797'}" (click)="opensubtopic(topics,i)">
<ion-icon color="light" no-margin no-padding text-center class="story_img" *ngIf="topics.topics_hide.locked=='true'"name="lock"></ion-icon>
<ion-icon color="light" no-margin no-padding text-center class="story_img "*ngIf="topics.topics_hide.locked=='false'"name="ios-unlock-outline"></ion-icon>
<hr>
<img no-margin no-padding text-center class="story_img" src={{topics.topics_icon}}>
</div>
<p class="story_text">{{topics.topics_title}}</p>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.