Ionic 3-讀取NFC卡了嗎？

Question

我被困了幾個星期，試圖從我的離子項目中讀取NFC卡。

在真實設備上運行該應用程序（帶有Android的Samsung S7 Edge）。

我正在關注： https : //ionicframework.com/docs/native/nfc/

然后，我在項目上安裝了插件：

ionic cordova plugin add phonegap-nfc

npm install @ionic-native/nfc

只需要將 Card Tag ID讀入變量tagId（字符串）以顯示它即可。

我的來源：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NFC, Ndef } from '@ionic-native/nfc/ngx';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    NFC,
    Ndef,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController, Platform, AlertController, ToastController } from 'ionic-angular';
import { NFC, Ndef } from '@ionic-native/nfc/ngx';

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

  constructor(public platform: Platform,
              private alertCtrl: AlertController, 
              private toastCtrl: ToastController,
              public navCtrl: NavController, 
              private nfc: NFC,
              private ndef: Ndef) {

    this.platform.ready().then(() => { 
      this.addListenNFC();
    });

  } // del constructor

    addListenNFC() {
      console.log('entra a addListenNFC');

      this.nfc.addNdefListener(() => {
        console.log('successfully attached ndef listener');
      }, (err) => {
        console.log('error attaching ndef listener', err);

        let toast = this.toastCtrl.create({
          message: err,
          duration: 1000,
          position: 'bottom'
        });

        toast.present(); 

      }).subscribe((event) => {
        console.log('received ndef message. the tag contains: ', event.tag);
        console.log('decoded tag id', this.nfc.bytesToHexString(event.tag.id));

        let toast = this.toastCtrl.create({
          message: this.nfc.bytesToHexString(event.tag.id),
          duration: 1000,
          position: 'bottom'
        });

        toast.present(); 
      });

    }
} 

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>
      NFC-Access Card
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>Please Scan Access Card</h1>
  <ion-card>
    <ion-card-content>
      <p>Account Tag ID: {{ tagId  }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>

我在控制台中收到此錯誤：

控制台錯誤添加監聽器

為什么在添加偵聽器時出現此錯誤？ 怎么了？？

謝謝。

Answer 1

其版本不兼容錯誤。 檢查您的ionic.config.json 。 如果您的類型是離子型，那么您需要將nfc插件版本降級為4.xx。因此，當您將插件導入到app.module.ts和您各自的組件文件時，它將變為：

import { NFC, NDef } from '@ionic-native/nfc'

代替：

import { NFC, NDef } from '@ionic-native/nfc/ngx'