Angular 19 - Bootstrap Carousel не начнется автоматически, но только после того, как пользователь взаимодействует с ним ⇐ Html

[Anonymous]

Я заполняю родителя таким образом (это тело таблицы) < /p>

Код: Выделить всё

Тогда в компоненте детской карты, чье поступает из *ngfor родительского < /p>


import { CommonModule } from '@angular/common';
import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, QueryList, SimpleChanges, ViewChild, ViewChildren } from '@angular/core';
import { IArticolo } from '../../../../shared/models/Articolo';
import { OrdiniJumbotronService } from '../../../../core/services/data/ordini-jumbotron.service';
import { startWith } from 'rxjs';

@Component({
selector: 'app-ordini-jumbotron',
standalone: true,
imports: [CommonModule],
templateUrl: './ordini-jumbotron.component.html',
styleUrl: './ordini-jumbotron.component.css'
})
export class OrdiniJumbotronComponent implements OnChanges, AfterViewInit{

@ViewChildren('Item') carouselItems: QueryList = new QueryList
@ViewChildren('slideButtons') slideButtons: QueryList = new QueryList

@Input()
Titolo: string = "";
@Input()
SottoTitolo: string = "";
@Input()
Show: boolean = true;
@Input()
listaProdotti: IArticolo[] = [];

idx: number = 0;

constructor() { }

ngAfterViewInit(): void {

this.idx = 0;
console.log(this.carouselItems);
this.carouselItems.forEach((el, j, arr) => {
if (arr.length === this.listaProdotti.length) {
if (this.idx === j) {
el.nativeElement.classList.add('active');
} else {
el.nativeElement.classList.remove('active');
}
}
})
this.idx = 0;
console.log(this.slideButtons);
this.slideButtons.forEach((el, j, arr) => {
if (arr.length === this.listaProdotti.length) {
if (this.idx === j) {
el.nativeElement.classList.add('active');
} else {
el.nativeElement.classList.remove('active');
}
}
})
}

ngOnChanges(changes: SimpleChanges): void { }

}< /code>


@for(prodotto of listaProdotti; ; track prodotto; let i = $index){

}

@for(prodotto of listaProdotti; ; track prodotto;  let i = $index){

[img]{{prodotto.imgsrc}}[/img]


{{prodotto.Prototype}}


}



Previous



Next

< /code>
< /div>
< /div>
< /p>
 Вопрос № 1: < /strong> Иногда два < /p>




Подробнее здесь: [url]https://stackoverflow.com/questions/79492600/angular-19-bootstrap-carousel-wont-start-automatically-but-only-after-the-use[/url]