Angular 2 - *ngFor: есть ли способ использовать альтернативное конечное условие?

Я пришел сюда, потому что после многих часов гугления я не нашел способа использовать альтернативное условие остановки для циклов, созданных с помощью встроенной директивы: *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 фотографий. У меня есть три типа строк: - Отобразить одно изображение, - Отобразить два изображения, - Отобразить три изображения.

Проблема в том, что индекс моего первого изображения в каждой строке всегда ниже индекса, используемого для отображения строки. Поэтому, если я хочу иметь возможность отображать все свои изображения, я должен иметь возможность изменить конечные условия файла *ngFor.

Большое спасибо за Вашу помощь!


typescript angular loops conditional-statements ngfor
person Dev    schedule 01.08.2016    source источник
comment
Просто чтобы познакомить вас с другими экосистемами: если бы вы использовали JSX, у вас не возникло бы никаких затруднений по этому поводу (поскольку это просто JavaScript) и хорошо поддерживается TypeScript: youtube.com/watch?v=-oEa6UueHsk ????   -  person basarat    schedule 02.08.2016
comment
Надеюсь, это может помочь и для альтернативы разрыва цикла   -  person KCP    schedule 01.06.2017

Ответы (2)


arrow_upward
3
arrow_downward

*ngFor предоставляет значение last:

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

См. также Реализация ngClassEven ngClassOdd для angular 2

person Günter Zöchbauer    schedule 01.08.2016
comment
Привет! Большое спасибо за ваш быстрый ответ, но это не то, что я ищу. Как вы можете видеть в документации angular2: last будет установлено логическое значение, указывающее, является ли элемент последним в итерации. Мне не нужно определять, когда я нахожусь в последнем индексе, я должен позволить моему циклу продолжаться после последнего индекса. - person Dev; 01.08.2016
comment
Понятия не имею, что вы имеете в виду под условием остановки. - person Günter Zöchbauer; 01.08.2016
comment
Я имею в виду, что ngFor — это цикл, который останавливается, когда индекс превосходит array.length. Мне нужно остановить мой цикл, когда индекс превосходит переменную моего класса. - person Dev; 01.08.2016
comment
Вы не можете остановить цикл. Вы можете использовать ngIf="i <= pics.length", чтобы предотвратить добавление элементов, которые не соответствуют условию, или использовать канал, который фильтрует элементы, которые вы не хотите отображать. - person Günter Zöchbauer; 01.08.2016

arrow_upward
1
arrow_downward

Я, наконец, решил свою проблему уродливым, но рабочим способом... Вместо того, чтобы писать другое конечное условие, я сделал цикл с массивом длины, который вычисляется функцией. Я прочитал свой другой массив (тот, что с моими фотографиями) в этом цикле.

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>
person Dev    schedule 03.08.2016
comment
Возможно, вы просто хотите использовать канал среза angular.io/docs/ts/latest /guide/pipes.html - person Günter Zöchbauer; 04.08.2016