Несколько загрузочных каруселей, одна страница, динамические идентификаторы (через ngFor) - как добавить кнопки «предыдущий / следующий» - PullRequest
Новая
       28

Несколько загрузочных каруселей, одна страница, динамические идентификаторы (через ngFor) - как добавить кнопки «предыдущий / следующий»

0 голосов
/ 24 сентября 2019

Я создаю макет сайта по продаже автомобилей.У меня есть цикл ngFor, создающий мои карты, которые отображают карусель и данные о каждой машине.

Проблема, с которой я сталкиваюсь в настоящее время, состоит в том, что каждая кнопка «предыдущая / следующая» карусели будет управлять только первой каруселью, сгенерированной из-за hrefсоответствует первому идентификатору.

Я не уверен, как передать динамически сгенерированный идентификатор карусели в href для навигации по слайдам

Я был бы очень признателен за объяснение того, где я иду не так илиСсылка куда-нибудь, где я могу расширить свои знания.

Я пытался:

  • вставка {{Car.id}} в href (без работы - понятно почему)

  • замена href на [href] т.е. [href] = "Car.id"

^ приводит к перезагрузке страницы в /Car.id (например, / 12)

также попытался добавить # -> [href] = "'#' + Car.id"

core.js: 6014 Ошибка: неучтено (в обещании): ошибка: Не может соответствовать ни одному маршруту.Сегмент URL: «17» Ошибка: невозможно сопоставить ни один маршрут.Сегмент URL: '17'

  • замена href на ng-href, т.е. ng-href = "{{Car.id}}" 
    <div *ngFor="let Car of carArray; let i = index" class="card">
      <div id="{{Car.id}}" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000">
        <div class="carousel-inner">


          <div *ngFor="let Car of carArray; let isFirst = first" [class.active]="isFirst" class="carousel-item">
            <img class="d-block w-100" src="{{Car.img}}" alt="{{Car.img}}">
          </div>
        </div>



        <a class="carousel-control-prev" [href]="Car.id" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#id1" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

Не могупривязка к 'ng-href', так как это не известное свойство 'a'.("

  <a class="carousel-control-prev" [ERROR ->]ng-href="{{Car.id}}" role="button" data-slide="prev">

1 Ответ

0 голосов
/ 24 сентября 2019

Исправлено после гораздо большего количества поисков!

Пришлось удалить теги <a> и заменить на <span>, чтобы остановить ngRouter от перегрузки.

Затем измените href="" на [attr.data-target]=""

<span class="carousel-control-prev" [attr.data-target]="'#' + Car.id" role="button" data-slide="prev"></span>
...