Стеки div angular2
Я пытаюсь переделать этот пост: angularjs Как создать стек div с помощью ng-repeat
который представляет собой код angular1 в версию angular2 / 3. Однако я застрял только в одной части, где:
ng-class = "{'card-hide': index > $index + 1}"
не работает. Я делаю это как: [ngClass] = "{'card-hide': index > $index + 1}", но этот $index недействителен. Здесь есть плункер:
http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview
И я вижу в app.js, что они используют $ scope.index = 1;
Я пробовал [ngClass] = "{'card-hide': index > index + 1}", но тоже не работал. Мне нужно добавить этот класс card-hide в самый последний элемент из списка ngFor каждый раз, когда я нажимаю кнопку или вызываю функцию для удаления элемента. Таким образом, этот класс должен быть добавлен только в последний элемент списка и удален, если вы вернетесь. В плунжере все объяснено, только что написано на Angular1.
Существует также свойство last, которое вы можете использовать: *ngFor = "let item of items; let last = last", чтобы затем вы могли выполнить ng-class = "{'card-hide': last}"
Ясно спасибо. Но в этой логике это не сработает, так как каждый раз, когда индекс изменяется, он должен добавляться к последнему элементу в списке. Снова посмотрите на их плункер: plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview
Извините, я не внимательно посмотрел на plunkr. Теперь я понимаю проблему, взгляните на ответ ниже. Я добавил Stackblitz, чтобы вы могли увидеть его в действии
Ответы 1
В этом примере $index относится к индексу отдельной карты. Мы можем сделать это, используя следующее:
*ngFor = "let card of cards; let $index = index"
У меня есть еще одна вещь, которую я хочу реализовать, и она блокирует меня. Я хочу в основном ограничить штабелирование, чтобы отображалось 3-4 элемента в стеке. Все новые элементы будут добавлены в список, но они не изменят верхнюю позицию. Я поместил это: [ngStyle] = "{top: cards.length <4? This.spaceOne * $ index + 'px': this.spaceTwo, 'z-index': (cards.length - $ index)}" >, где у меня есть spaceOne = 2 и SpaceTwo = 0 в файле TS, но сразу после того, как длина списка изменится на 4, он применяет это правило ко всем элементам, поэтому все они меняют позицию top = 0
Это то, что я делаю, и все в порядке. Просто часть добавления этого класса к последнему элементу в списке не работает. У них есть две кнопки, prev и next, например: <button type = "button" class = "btn btn-next" (click) = "idx = idx <list.length? Idx + 1: list.length"> Next < / button> <button type = "button" class = "btn btn-pre" (click) = "idx = idx> 1? idx - 1: 1"> Предыдущий </button>