如何在Ionic5中生成二维码

2022-03-24 00:00:00 html angular ionic4

在Ionic 5中有没有可能生成二维码的方法?我试过了,但它一直显示qrcode是未知元素。

这是我的代码

qrcode.html

<ion-item>
    <ion-input type="text" placeholder="My QR data" [(ngModel)]="myAngularxQrCode"></ion-input>
</ion-item>

<ion-card *ngIf="createdCode">
    <qrcode [qrdata]="'myAngularxQrCode'"></qrcode>
    <ion-card-content>
        <p>Value: {{qrData}}</p>
    </ion-card-content>
</ion-card>

qrcode.ts

export class qrcode implements OnInit {
    createdCode = null;
    myAngularxQrCode = null;
    qrData = 'http://hrms.my-epmo.com/default.aspx';

    constructor() {
        this.myAngularxQrCode = 'Your QR code data string';
    }
}

这就是我试过的。我希望有人能帮我解决这个问题。 提前感谢!


解决方案

我使用过ngx-qrcode。

在您的模板中

<ngx-qrcode [qrc-value]="createdCode">
  </ngx-qrcode>

在您的控制器中

ngOnInit() {
    this.user = this.globals.access.user;
    this.createCode(this.globals.access.user.username);
  }


  createCode(toEncode) {
    this.createdCode = toEncode;
  }

相关文章