4

私がここに来るのは、何時間もグーグルで調べた後、組み込みディレクティブで作成されたループに別の停止条件を使用する方法が見つからなかったからです: *ngFor.

実際には、 *ngFor は次の条件でループを終了します: index < array.length. : のような別の条件でループを終了する方法があるかどうかを知りたいですi < myVariable。

なぜ私がそれをしたいのか疑問に思っているなら、それは私がこのように作業している画像ギャラリーに取り組んでいるためです:

<div *ngFor="let pic of pics; let i = index">
    <div *ngIf="whichRowType(i) == 3">
        <small>pic[whichIndex(i)].id</small>
        <small>pic[currentIndex + 1].id</small>
        <small>pic[currentIndex + 2].id</small>
    </div>

    <div *ngIf="whichRowType(i) == 2">
        <small>pic[whichIndex(i)].id</small>
        <small>pic[currentIndex + 1].id</small>
    </div>

    <div *ngIf="whichRowType(i) == 1">
        <small>pic[whichIndex(i)].id</small>
    </div>
</div>

この例では、3 つの写真ごとに行を作成します。3 種類の行があります: - 1 つの写真を表示、 - 2 つの写真を表示、 - 3 つの写真を表示。

問題は、各行の最初の画像のインデックスが、行を表示するために使用されるインデックスよりも常に劣っていることです。したがって、すべての写真を表示できるようにしたい場合は、*ngFor の終了条件を変更できる必要があります。

ご助力ありがとうございます！

4

2 に答える 2

3

*ngFor値を提供しlastます:

  <div *ngFor="let pic of pics; let i = index; let last=last">
    <div *ngIf="last">
      ...
    </div>
  </div>

angular 2 の ngClassEven ngClassOdd の実装も参照してください。

于 2016-08-01T18:42:29.793 に答える
1

私は最終的に私の問題を醜いが機能する方法で解決しました...別の終了条件を書く代わりに、関数によって計算される長さの配列でループを作成しました。そのループで他の配列 (私の写真を含むもの) を読み取ります。

Angular は本当にそのための何かを作るべきです! 助けてくれてありがとう！

それを解決する方法の例:

<div *ngFor="let galleryIndex of galleryIndexes; let i = index">
    <div *ngIf="whichRowType(galleryIndex) == 3">
        <small>pics[setCurrentIndex(galleryIndex)].id</small>
        <small>pics[currentIndex + 1].id</small>
        <small>pics[currentIndex + 2].id</small>
    </div>

    <div *ngIf="whichRowType(galleryIndex) == 2">
        <small>pics[setCurrentIndex(galleryIndex)].id</small>
        <small>pics[currentIndex + 1].id</small>
    </div>

    <div *ngIf="whichRowType(galleryIndex) == 1">
        <small>pics[setCurrentIndex(galleryIndex)].id</small>
    </div>
</div>
于 2016-08-03T20:59:37.757 に答える