7

Angular 2 で ngFor ループのカウントアップに問題があります。3 つの列と動的な量の行を持つグリッドを開発しようとしています。配列をループして要素を左から右に追加し、3 つの要素ごとに次の行にジャンプする必要があります。Ionic Framework 2.0 を使用しています。

私のコードは次のようになります。

   <ion-row *ngFor="#m of movies; #i = index"  (click)="movieTapped(m)">
        <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
                {{m.Title}} <br>
                Rating:     {{m.imdbRating}}<br>
                Rated:      {{m.Rated}}<br>
                Released:   {{m.Year}}<br>
            </div>
        </ion-col>
        <ion-col  width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
         <ion-col width-33>
            <div class="row responsive-md">
                <img [src]="m.Poster" width="100%" />
            </div>
         </ion-col>
  </ion-row>

あなたが私を助けてくれることを願っています。

乾杯！

4

3 に答える 3

15

データ構造を列のグループにフォーマットしたくない場合 (これは理解できます)、行ごとに列 3 をレンダリングできます。このためには、行インデックスの追加のヘルパー配列を事前に計算する必要があります[0,1,2,3]。配列内の要素の数は、ion-rowレンダリングする要素の数と同じにする必要があります。したがって、コントローラーのコンストラクター関数では、次のようなことができます。

this.rows = Array.from(Array(Math.ceil(this.movies.length / 3)).keys())

次に、テンプレートに 2 つのngForループがあります。

<ion-row *ngFor="#i of rows" (click)="movieTapped(m)">
  <ion-col *ngFor="#m of movies | slice:(i*3):(i+1)*3" width-33>
    <div class="row responsive-md">
      <img [src]="m.Poster" width="100%" /> {{m.Title}}
      <br> Rating: {{m.imdbRating}}
      <br> Rated: {{m.Rated}}
      <br> Released: {{m.Year}}
    </div>
  </ion-col>
</ion-row>

それでおしまい。現在の行インデックス スライス パイプに応じて、行ごとに必要なアイテムがレンダリングされます。

簡単なデモを次に示します: http://plnkr.co/edit/WyEfryGccFrJvwm6jExM?p=preview

于 2016-03-08T16:47:30.107 に答える
2

レンダリングする構造 (3 列の行) を表すようにデータを変更し、データに従ってビューをレンダリングします。

<ion-row *ngFor="let r of rows; let i = index"  (click)="movieTapped(m)">
    <ion-col width-33 *ngFor="let m of r; let j = index">
        <div class="row responsive-md">
            <img [src]="m.Poster" width="100%" />
            {{m.Title}} <br>
            Rating:     {{m.imdbRating}}<br>
            Rated:      {{m.Rated}}<br>
            Released:   {{m.Year}}<br>
        </div>
    </ion-col>
</ion-row>
于 2016-03-08T14:26:03.553 に答える