时间戳

首页 > 解决方案 > Ionic 3 - 读取 NFC 卡？

android - Ionic 3 - 读取 NFC 卡？

问题描述

我被困了几个星期，试图从我的 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 {}

主页.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(); 
      });

    }
}

主页.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>

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

控制台错误添加侦听器

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

谢谢。

标签： androidionic-frameworknfc

解决方案

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

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

代替：

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

推荐阅读