ionic2 :创建画廊网格
ionic2 :创建画廊网格
提问于 2017-06-09 13:47:34
我想要创建3列响应画廊网格。我正在用下面的代码迭代图像数组：
<ion-grid>
<ion-row *ngFor="let image of images; let i = index;" *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>
</ion-grid>但其显示错误如下：
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("
<ion-grid>
<ion-row *ngFor="let image of images; let i = index;" [ERROR ->]*ngIf="{{i % 3 === 0}}">
<ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i < images.le"): ng:///AppModule/PhotoGalleryPage.html@16:62
TypeError: Cannot read property 'toUpperCase' of undefined ("
<ion-grid>
<ion-row *ngFor="let image of images; let i = index;" [ERROR ->]*ngIf="{{i % 3 === 0}}">
<ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i < images.le"): ng:///AppModule/PhotoGalleryPage.html@16:62
Can't bind to '*ngIf' since it isn't a known property of 'ion-row'.
1. If 'ion-row' is an Angular component and it has '*ngIf' input, then verify that it is part of this module.
2. If 'ion-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ion-grid>
<ion-row *ngFor="let image of images; let i = index;" [ERROR ->]*ngIf="{{i % 3 === 0}}">
<ion-col col-4 (click)="openPhoto(image)" *ngIf="{{i < images.le"): ng:///AppModule/PhotoGalleryPage.html@16:62
Parser Error: Unexpected token {, expected identifier, keyword, or string at column 2 in [{{i % 3 === 0}}] in ng:///AppModule/PhotoGalleryPage.html@16:62 ("ow *ngFor="let image of images; let i = index;" *ngIf="{{i % 3 === 0}}">
<ion-col col-4 [ERROR ->](click)="openPhoto(image)" *ngIf="{{i < images.length}}">
<img [src]="images[i].url" "): ng:///AppModule/PhotoGalleryPage.html@17:27
Parser Error: Missing expected : at column 14 in [{{i % 3 === 0}}] in ng:///AppModule/PhotoGalleryPage.html@16:62 ("ow *ngFor="let image of images; let i = index;" *ngIf="{{i % 3 === 0}}">
<ion-col col-4 [ERROR ->](click)="openPhoto(image)" *ngIf="{{i < images.length}}">
<img [src]="images[i].url" "): ng:///AppModule/PhotoGalleryPage.html@17:27
Parser Error: Unexpected token } at column 14 in [{{i % 3 === 0}}] in ng:///AppModule/PhotoGalleryPage.html@16:62 ("ow *ngFor="let image of images; let i = index;" *ngIf="{{i % 3 === 0}}">我无法理解错误，因为我是Ionic2的新手。有人能帮我吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-06-09 14:25:45
我的第一个错误是将那些花括号放置在*ngIf条件下，当我移除大括号并重新运行该项目时，它给出了如下错误：
不能对一个元素进行多个模板绑定。只使用一个名为“template”或前缀为*的属性
因此，在搜索了这个问题的解决方案之后，我发现了这样的答案：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>Stack Overflow用户
发布于 2018-02-08 16:31:01
通用ionic2图像网格。您可以配置n个列数。Ionic2多列图像网格
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44459494
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号