ionic2：创建画廊网格

23 浏览
0 Comments

ionic2：创建画廊网格

我想创建一个具有3列的响应式画廊网格。我正在使用以下代码迭代图像数组：

但是显示以下错误：

不能在一个元素上有多个模板绑定。只使用一个名为“template”的属性或带有“*”前缀的属性（“”
    
        ]*ngIf="{{i % 3 === 0}}">
            
        ]*ngIf="{{i % 3 === 0}}">
            
        ]*ngIf="{{i % 3 === 0}}">
            
            ](click)="openPhoto(image)" *ngIf="{{i < images.length}}">
                
            ](click)="openPhoto(image)" *ngIf="{{i < images.length}}">

我无法理解这个错误，因为我是Ionic2的新手。有人能帮我吗？

0

2 答案

0 Comments

ionic2 : creating gallery grid问题的出现原因是在使用*ngIf条件时，错误地将花括号放在了条件中。当我删除花括号并重新运行项目时，出现了以下错误：

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *

因此，在搜索解决方案时，我找到了以下Stack Overflow答案：

https://stackoverflow.com/a/40860957/1739882

因此，我的解决方案是：

<ion-grid>
    <div *ngFor="let image of images; let i = index;">
        <ion-row *ngIf="i % 3 === 0">
            <ion-col col-4 (click)="openPhoto(image)" *ngIf="i < images.length">
                <img [src]="images[i].url" />
            </ion-col>
            <ion-col col-4 (click)="openPhoto(image)" *ngIf="i+1 < images.length">
                <img [src]="images[i+1].url" />
            </ion-col>
            <ion-col col-4 (click)="openPhoto(image)" *ngIf="i+2 < images.length">
                <img [src]="images[i+2].url" />
            </ion-col>
        </ion-row>
    </div>
</ion-grid>

0
0 Comments

问题原因：在创建Ionic2的图库网格时，出现了一个问题。

解决方法：可以通过访问以下链接来获取关于创建Ionic2图库网格的指导：Ionic2 multi columns Image Grid

0