[英]Angular ngx-swiper-wrapper giving an error of TS2339 Property 'x' does not exist on type 'y'
我有一个可以工作的 swiper 滑块,但总是有一个错误 TS2339 说
Property 'config' does not exist on type 'AppComponent'
Property 'index' does not exist on type 'AppComponent'.
我遵循了https://www.npmjs.com/package/ngx-swiper-wrapper上的非常简单的说明,它工作正常,但给了我 TS2339 错误。 我该如何解决? 由于 swiper 滑块工作正常,有什么方法可以禁用该错误?
这是我的代码:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProductPageComponent } from './product-page/product-page.component';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { SwiperModule } from 'ngx-swiper-wrapper';
import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
import { SWIPER_CONFIG } from 'ngx-swiper-wrapper';
const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
slidesPerView: 4,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
};
@NgModule({
declarations: [
AppComponent,
ProductPageComponent,
LandingPageComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
SwiperModule
],
providers: [
{
provide: SWIPER_CONFIG,
useValue: DEFAULT_SWIPER_CONFIG
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
应用程序组件.html
<div class="container mb-5">
<div class="card">
<div class="card-body shadow">
<h5 class="card-title">Recommended for you</h5>
<div class="swiper-container" [swiper]="config" [(index)]="index">
<div class="swiper-wrapper">
<div class="swiper-slide p-4">
<img src="../../assets/images/Rectangle 72.png">
</div>
<div class="swiper-slide p-4">
<img src="../../assets/images/Rectangle 73.png">
</div>
<div class="swiper-slide p-4">
<img src="../../assets/images/Rectangle 74.png">
</div>
<div class="swiper-slide p-4">
<img src="../../assets/images/Rectangle 75.png">
</div>
<div class="swiper-slide p-4">
<img src="../../assets/images/Rectangle 72.png">
</div>
<div class="swiper-slide p-4">
<img src="../../assets/images/Rectangle 73.png">
</div>
<div class="swiper-slide p-4">
<img src="../../assets/images/Rectangle 74.png">
</div>
<div class="swiper-slide p-4">
<img src="../../assets/images/Rectangle 75.png">
</div>
</div>
<div class="swiper-scrollbar"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
在互联网上挖掘后,我通过删除index
类并在 component.ts 上添加config
代码找到了解决方案
public config: SwiperConfigInterface = {
a11y: true,
direction: 'horizontal',
slidesPerView: 4,
keyboard: true,
mousewheel: true,
scrollbar: true,
navigation: true,
pagination: false
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.