ionic2：创建画廊网格

Question

我想创建具有 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 的新手，我无法理解该错误。谁能帮我解决这个问题？

Answer 1

我的第一个错误是将这些花括号放在*ngIf 条件下，当我删除花括号并重新运行项目时，它给出了如下错误：

一个元素上不能有多个模板绑定。只使用一个 名为“模板”或以 * 为前缀的属性

所以，在搜索了这个解决方案之后，我遇到了这个 SO 答案： 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>

Answer 2

通用 ionic2 图像网格。您可以配置 n 个列。 Ionic2 multi columns Image Grid