離子2框架signaturepad formbuilder問題

當我嘗試導航到mytest的網頁在我的離子2基於框架的應用程序，我正在此錯誤：離子2框架signaturepad formbuilder問題

Runtime Error Uncaught (in promise): TypeError: sp is not a constructor TypeError: sp is not a constructor at SignaturePad.ngAfterContentInit (http://localhost:8100/build/main.js:63958:29) at callProviderLifecycles (http://localhost:8100/build/main.js:11544:18) at callElementProvidersLifecycles (http://localhost:8100/build/main.js:11525:13) at callLifecycleHooksChildrenFirst (http://localhost:8100/build/main.js:11509:17) at checkAndUpdateView (http://localhost:8100/build/main.js:12526:5) at callViewAction (http://localhost:8100/build/main.js:12838:17) at execComponentViewsAction (http://localhost:8100/build/main.js:12784:13) at checkAndUpdateView (http://localhost:8100/build/main.js:12529:5) at callViewAction (http://localhost:8100/build/main.js:12838:17) at execEmbeddedViewsAction (http://localhost:8100/build/main.js:12810:17) at checkAndUpdateView (http://localhost:8100/build/main.js:12524:5) at callViewAction (http://localhost:8100/build/main.js:12838:17) at execComponentViewsAction (http://localhost:8100/build/main.js:12784:13) at checkAndUpdateView (http://localhost:8100/build/main.js:12529:5) at callWithDebugContext (http://localhost:8100/build/main.js:13511:42)

我把一些調試代碼在angular2-signaturepad節點模塊的SignaturePad.prototype.ngAfterContentInit函數，它看起來像畫布對象是空的。

我在做什麼錯？

我的源代碼：

app.module.ts：

... 

import { SignaturePadModule } from 'angular2-signaturepad'; 
import { IonicStorageModule } from '@ionic/storage'; 

... 

    imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp), 
    CloudModule.forRoot(cloudSettings), 
    SignaturePadModule, 
    IonicStorageModule.forRoot() 
    ], 

...

mytest.ts

... 

import { SignaturePad } from 'angular2-signaturepad/signature-pad'; 
import { Storage } from '@ionic/storage'; 

... 

@ViewChild('mySlider') mySlider: any; 
@ViewChild(SignaturePad) signaturePad: SignaturePad; 

    signaturePadOptions: Object = { 
    'minWidth': 2, 
    'canvasWidth': 400, 
    'canvasHeight': 200, 
    'backgroundColor': '#f6fbff', 
    'penColor': '#666a73' 
    }; 

    constructor(public viewCtrl: ViewController, 
      public auth: Auth, 
      public navCtrl: NavController, 
      public navParams: NavParams, 
      public events: Events, 
      public tabsService: TabsService, 
      public formBuilder: FormBuilder, 
      public alert: AlertController, 
      public storage: Storage) { 
    this.slide2Form = formBuilder.group({ }); 
} 
...

mytest.html

<ion-content> 
<ion-slides #mySlider> 
<ion-slide> 
    <ion-list no-lines> 
    <form [formGroup]="slide2Form"> 
     <ion-item> 
     <ion-label>Date</ion-label> 
     <ion-datetime displayFormat="MMMM/DD/YYYY" formControlName="signatureSigned"></ion-datetime> 
     </ion-item> 

     <ion-item> 
     <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad> 
     <button ion-button full color="danger" (click)="clearPad()">Clear</button> 
     </ion-item> 
    </form> 
    </ion-list> 
    </div> 
</ion-slide> 
</ion-slides>         
</ion-content> 
...

來源

2017-06-03 sizzle

一些光我想通了這個問題。我正在導入signature_pad和angular2-signaturepad節點模塊。儘管我沒有使用signature_pad（它作爲angular2-signaturepad模塊中的依賴項），但它導致了上面的運行時錯誤。我刪除了signature_pad模塊：

npm uninstall signature_pad

然後我重新啓動應用程序，它工作。

來源

2017-07-07 20:23:12 sizzle

您的代碼似乎是好吧，但它可能是簽名問題_pad，也許你不導入正確的方式，嘗試：

import * as SignaturePad from 'signature_pad';

從看這裏的代碼： https://github.com/wulfsolter/angular2-signaturepad/blob/master/signature-pad.ts

似乎「SP」試圖使用加載模塊「規定」

This link也可能揭示這個問題

來源

2017-06-29 17:07:14 ApriOri

離子2框架signaturepad formbuilder問題

回答

相關問題