Question

我试图在ionic3应用程序中包含WheelSelector（适用于Ionic Native的Wheel-selector插件），但是当我尝试将WheelSelector导入并添加到我的app.module.ts @NgModule中的提供程序列表中时，我收到错误：“类型'WheelSelectorOriginal'无法分配给类型'提供商'。”

我正在尝试遵循这个简单的教程： https://ionicacademy.com/wheel-picker-ionic/

我通过在项目文件夹中执行以下操作来安装插件：

ionic cordova plugin add cordova-wheel-selector-plugin
npm install --save @ionic-native/wheel-selector

最终，我根本无法使该插件正常工作。

我曾尝试从这两者中导入WheelSelector：

 '@ionic-native/wheel-selector' 
 '@ionic-native/wheel-selector/ngx'

如果我使用ngx版本，则不再收到上面的赋值错误，但是我收到一个新的运行时错误，指出Object（...）不是函数。

app.module.ts：

import { WheelSelector } from '@ionic-native/wheel-selector';
...
@NgModule({
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
WheelSelector
]

home.ts：

import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { WheelSelector } from '@ionic-native/wheel-selector';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  dummyJson = {
    days: [
      {description: 'Mon'},
      {description: 'Tue'},
      {description: 'Wed'},
      {description: 'Thu'},
      {description: 'Fri'},
      {description: 'Sat'},
      {description: 'Sun'}
    ],
    people: [
      {description: 'Joe'},
      {description: 'John'},
      {description: 'Max'}
    ]
  };

constructor(public navCtrl: NavController, 
private toastCtrl: ToastController, private selector: WheelSelector) {}

openPicker(){
    this.selector.show({
      title: 'select your contact',
      positiveButtonText: 'yes',
      negativeButtonText: 'no',
        items:[
         this.dummyJson.days,
         this.dummyJson.people
      ],
        defaultItems: [
         {index:0, value: this.dummyJson.days[4].description},
         {index:1, value: this.dummyJson.people[1].description},
      ]

   }).then(result=>{
     let msg = 'woo';

     let toast = this.toastCtrl.create({
       message: msg,
       duration: 4000
     });
     toast.present();

    });
  } 
 }

任何帮助我出错的地方将不胜感激！谢谢！

Answer 1

已解决：

有几个问题：

我相信过去Ionic 2现在对ionic-native插件的导入必须来自ngx文件夹。在app.module.ts文件和home.ts文件中都对此进行了更改。这样可以解决提供商分配问题。

import { WheelSelector } from '@ionic-native/wheel-selector'/ngx;

接下来，在我的package.json文件中，我将所有@ ionic-native依赖项升级为：“ 5.0.0-beta.15”。所以：

"@ionic-native/core": "5.0.0-beta.15",
"@ionic-native/splash-screen": "5.0.0-beta.15",
"@ionic-native/status-bar": "5.0.0-beta.15",
"@ionic-native/wheel-selector": "5.0.0-beta.15",

然后：

npm install

App现在可以正常运行而没有错误-仍然无法显示wheelselector，但是我认为这可能是因为我在浏览器而非设备上进行测试...

在@NgModule中声明为提供程序时，WheelSelector离子本机插件错误

1 个答案: