属性“ slidesPerView”的类型不兼容

时间:2018-08-04 20:31:22

标签: angular typescript angular6 swiper

考虑使用NGX-Swiper-Wrapper插件的Angular 6应用。
在SwiperComponent模板文件中使用以下命令调用Swiper插件:

<swiper [config]="customConfig">
...
</swiper>

为了使组件文件更具可读性,请从服务中进行swiper配置:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';
import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
...
export class SwiperComponent implements OnInit {
  customConfig: SwiperConfigInterface;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.customConfig = this.dataService.getCustomConfig();
  }

}

这是服务:

import { Injectable } from '@angular/core';
...
export class DataService {

  constructor() { }

  getCustomConfig() {
    return {
      observer: true,
      direction: 'vertical',
      slidesPerView: 'auto',
      freeMode: true,
      ...
    };
  }

  // Lots of other configs here
  ...

}

出现错误:

  

错误TS2322:键入'{... slidesPerView:字符串; ...' 不是   可分配给类型“ SwiperConfigInterface”。财产种类   'slidesPerView'不兼容。类型“字符串”不可分配给   输入'number | “自动”。

可以以残酷的方式忽略此错误,只是将customConfig变量的类型从SwiperConfigInterface更改为any。但是,有人知道解决此问题的更好方法吗?

1 个答案:

答案 0 :(得分:1)

slidesPerView的{​​{1}}属性需要类型为SwiperConfigInterface的值或类型为number的值:

'auto'

根据错误消息,Typescript在此对象中将slidesPerView?: number | 'auto', 视为类型'auto'

string

通过强制转换,您可以强制编译器将其视为return { observer: true, direction: 'vertical', slidesPerView: 'auto', freeMode: true, ... }; 类型的值:

'auto'