ngStyle指令不适用于ng模板

Question

我正试图用ngStyle指令将自定义样式应用于ng模板，我想制作一个Slider，使用Swiper for Angular显示电影信息，如果我删除ngStyle指令，Slider会工作，只有当我添加指令时，Slider才不工作。

slider.component.html:

<swiper [config]="swiperConfig">
<ng-template 
swiperSlide 
*ngFor="let movie of movieList | slice:0:10" 
[ngStyle]="{
'background-size': 'cover', 
'background-image': 'url(https://image.tmdb.org/t/p/original' + movie.backdrop_path + ')'
}">
<div class="movie-description">
<h3>{{ movie.title }}</h3>
<p>
{{ movie.overview }}
</p>
</div>
</ng-template>
</swiper>

滑动器组件.ts

import { Component, Input, OnInit } from '@angular/core';
import { Movie } from 'src/app/interfaces/movie-listings-response';
import  SwiperCore, { Navigation, SwiperOptions } from 'swiper';
SwiperCore.use([Navigation]);
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {
@Input() movieList: Movie[] = [];
baseURLImage: string = 'https://image.tmdb.org/t/p/original';

swiperConfig: SwiperOptions = {
slidesPerView: 1,
spaceBetween: 20,
navigation: true
};
constructor() { }
ngOnInit(): void {
console.log(this.movieList);
}
}

组件.模块.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule } from '@angular/router';
import { SliderComponent } from './slider/slider.component';
import { SwiperModule } from 'swiper/angular';

@NgModule({
declarations: [
NavbarComponent,
SliderComponent
],
exports: [
NavbarComponent,
SliderComponent
],
imports: [
CommonModule,
RouterModule,
SwiperModule
],
})
export class ComponentsModule { }

项目已成功编译，错误显示在控制台浏览器中：控制台错误

Answer 1

<ng-template>不会在DOM中呈现。它可以帮助我们使用结构指令*ngIf、*ngFor等以及自定义指令。与<ng-container>相同。因此ngStyle在<ng-template>上不起作用。您可以将这些样式应用于<ng-template>中的<div>，也可以添加另一个仅用于样式的<div>，例如：

<swiper [config]="swiperConfig">
<ng-template 
swiperSlide 
*ngFor="let movie of movieList | slice:0:10">
<div 
[ngStyle]="{ 'background-size': 'cover', 
'background-image': 'url(https://image.tmdb.org/t/p/original' + movie.backdrop_path + ')'
}">
<div class="movie-description">
<h3>{{ movie.title }}</h3>
<p>
{{ movie.overview }}
</p>
</div>
</div>
</ng-template>
</swiper>

Answer 2

<ng-template>标记最终不会被angular呈现为HTML标记。仅根据需要使用标记中的内容。所以在ng-template标签上添加任何属性、样式都不会有任何效果。

添加到ng-template内部的某个元素，如div