Tengo un problema extraño, para el cual no he podido identificar la causa raíz. Tengo una aplicación angular y tiene un carrusel que muestra texto en lugar de imágenes, cada diapositiva tiene un botón de eliminación, llama a un método que recibe el índice y luego elimina el elemento del carrusel. Si elimino cualquier elemento excepto el primero, el carrusel desaparece.

Aquí está mi código de ejemplo, es totalmente reproducible en stackblitz:

 import { ChangeDetectorRef, Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { name = 'Angular'; myCarouselItems = ['slide 1', 'slide 2', 'slide 3']; constructor(private cdref: ChangeDetectorRef) {} deleteItem(index): void { this.myCarouselItems.splice(index, 1); this.cdref.detectChanges(); } }

HTML

 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item" *ngFor="let item of myCarouselItems; index as i; let isFirst = first" [ngClass]="{ active: i === 0 }" style="text-align: center;" > <p>{{ item }}</p> <a style="cursor: pointer" (click)="deleteItem(i)">Delete this element</a> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" style="background-color: red;" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" style="background-color: red;" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

Enlace al stackblitz https://stackblitz.com/edit/angular-simple-bootstrap-navbar-sdzr55?file=src/app/app.component.html

Alguien sabe como puedo arreglar esto?