jquery bootstrap в угловом2, определяющем индекс изображения карусели

110
14

Пытаясь воспроизвести этот простой фрагмент jquery, у меня из моего старого проекта в angular2. В основном выбираем индекс изображения карусели onclick="" or (click)="".

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

// this works on plain jquery
selectImage = function() {
$('#myCarousel').carousel(2)
}

в моем angular2 его довольно похожи: -

import { carousel } from 'bootstrap';
import $ from "jquery";
declare var carousel: any;

// doesn't work shows the error below
selectImage() {
$('#myCarousel').carousel(2);
}

Попытка выбрать изображение из этого div

<button (click)="selectImage()"> Select image (2)</button>

<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="./assets/imgs/4d4853533136_01-lg.jpg"></div>

<div class="item" data-slide-number="1">
<img src="./assets/imgs/4d4853533136_03.jpg"></div>

<div class="item" data-slide-number="2">
<img src="./assets/imgs/4d4853533136_02.jpg"></div>

<div class="item" data-slide-number="3">
<img src="./assets/imgs/4d4853533136_04.jpg"></div>
</div>
</div>

Сообщение об ошибке: ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).carousel is not a function

Вопрос: как я могу выполнять ту же функцию, что и мой jQuery-фрагмент в angular2?

Bootstrap выберите указанный номер изображения Ref

спросил(а) 2021-01-19T22:19:25+03:00 6 месяцев назад
1
Решение
126

Вы должны использовать [(activeSlide)]="activeSlideIndex" как [(activeSlide)]="activeSlideIndex" ниже. Установите "activeSlideIndex" в событие click или любое другое событие согласно требованию

<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
<slide *ngFor="let slide of slides; let index=index">
<img [src]="slide.image">

<div class="carousel-caption">
<h4>Slide {{index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>

ответил(а) 2021-01-19T22:19:25+03:00 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема