Angular ngx-swiper-wrapper给出错误的TS2339属性'x‘在类型'y’上不存在

Question

我有一个可以正常工作的滑块，但总是得到一个错误的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错误。我怎么才能修复它？既然滑块工作正常，有没有办法消除这个错误？

下面是我的代码：

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 { }

app.component.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>

Answer 1

在互联网上深入研究后，我找到了解决方案，删除了index类，并在component.ts上添加了一段config代码

  public config: SwiperConfigInterface = {
    a11y: true,
    direction: 'horizontal',
    slidesPerView: 4,
    keyboard: true,
    mousewheel: true,
    scrollbar: true,
    navigation: true,
    pagination: false
  };