ionic2：ギャラリーグリッドの作成

Question

3列の反応性グリッドグリッドを作成したいと思います。私はIonic2で初心者ですとエラーを理解することはできませんよ

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}}"> 

：以下のように

<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> 

しかし、その上映エラー：私はコードの下での画像の配列を反復処理しています。誰もこれで私を助けることができますか？

Answer 1

私の最初の間違いは*ngIf状態で、それらの中括弧を配置することだったと私は括弧を削除し、プロジェクトを再実行すると、それが与えたエラーのような：

1上に複数のテンプレートバインディングを持つことはできません素子。だから、

*「テンプレート」という名前または接頭辞のみ1 属性を使用して、この上の解決策を探した後、私はこの出くわした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

ジェネリックイオン2画像グリッド。 n個の列を構成できます。 Ionic2 multi columns Image Grid