Ionic 3 - 读取 NFC 卡？答案

【问题标题】：Ionic 3 - Read NFC Card?Ionic 3 - 读取 NFC 卡？
【发布时间】：2019-08-27 17:27:38
【问题描述】：

我被困了几个星期，试图从我的 ionic 项目中读取 NFC 卡。

在真实设备上运行应用程序（Samsung S7 Edge with Android）。

我正在关注这个： https://ionicframework.com/docs/native/nfc/

然后，我在我的项目中安装了插件：

ionic cordova plugin add phonegap-nfc

npm install @ionic-native/nfc

只需将 Card Tag Id 读入变量 tagId (string) 即可显示。

我的来源：

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>

我在控制台中收到此错误：

console error adding listener

为什么添加监听器时会出现此错误？怎么了？

谢谢。

【问题讨论】：

那么您是否在 Android 设备上运行此代码？还是在浏览器中？
在真机上运行应用程序（Samsung S7 Edge with Android）。
@DiegoRoque 是否有解决您的问题的方法？我的代码和你的差不多，但它不起作用。我也没有收到任何错误。我希望你的运气比我好。谢谢！

标签： android ionic-framework nfc

【解决方案1】：

这是版本不兼容错误。检查您的ionic.config.json。如果您的类型是 ionic angular，那么您需要将您的 nfc 插件版本降级到 4.x.x。因此，当您将插件导入您的 app.module.ts 和您各自的组件文件时，它就变成了；

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

代替：

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

【讨论】：