未捕获类型错误：无法访问属性 "classList" ，e 为空

Question

我想用Angular在引导程序转盘中显示Youtube视频。它正在显示幻灯片和视频，但当幻灯片移动时，我出现了以下错误：未捕获类型错误：无法访问属性"classList"；，e为空

我的html:

<div id="home-carousel" class="container p-0">
<div id="carouselDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button
*ngFor="let movie of sortedMovies; let i = index"
type="button"
data-bs-target="#carouselDark"
data-bs-slide-to="i"
[ngClass]="{active:i}"
aria-current="true"
aria-label="Slide 1"
[attr.data-slide-to]="i">
</button>
</div>
<div class="carousel-inner">
<div *ngFor="let movie of sortedMovies; let i = index" class="carousel-item" data-bs-interval="2000" [ngClass]="{'active': i}">
<iframe [src]='getSafeURL(movie.youtube)' height="500" class="d-block w-100" alt="..."></iframe>
<div class="carousel-caption d-none d-md-block">
<h2 class="text-white film-title">{{movie.title}}</h2>
<a [routerLink]="'/movie/' + movie.id">Zum Film</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>

和我的ts:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { environment } from 'src/environments/environment';
import { Movie } from '../../models/movie.model';
import { PublicService } from '../../services/public.service';

@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {
movies: Movie[] = [];
sortedMovies: Movie[]=[];
currentIndex: number = 1;
BACKEND_URL = environment.apiUrl
constructor(private publicService: PublicService, private sanitizer: DomSanitizer) { }

ngOnInit(): void {
this.publicService.getAllPublicMovies().subscribe((data) => {
this.movies = data;
this.sortedMovies = this.sortMovies(data)
console.log(this.sortedMovies)
});
}
getSafeURL(youtubeLink: string){
let youtubeId = this.getYoutubeId(youtubeLink);
let returnURL = 'https://www.youtube.com/embed/'+youtubeId;
let safeURL = this.sanitizer.bypassSecurityTrustResourceUrl(returnURL);
return safeURL;
}
getYoutubeId(youtubeLink: string) {
let regex = new RegExp(/(?:?v=)([^&]+)(?:&)*/);
let matches = regex.exec(youtubeLink);
let youtubeId = matches![1];
return youtubeId;
}
sortMovies(movies: Movie[]){
let sortedMovies: Movie[];
sortedMovies = movies.sort((a,b) => (a.cinemaRelease > b.cinemaRelease ? 1 : -1));
return sortedMovies;
}
}

我错过了什么。一旦幻灯片移动并出现错误，滑块将不再工作。

Answer 1

您需要了解插值。你的html代码中有几个错误。我想应该是：

[attr.data-bs-slide-to]="i" //<--if you want that the data-bs-slide-to change
[ngClass]="{'active':currentIndex==i}" //<--if you want 
//the class 'active' when currentIndex==i