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 class 并在 component.ts

上添加 config 代码

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