angular - 在无法识别的 ionic 5 错误元素中显示二维码 ngx-qrcode

标签 angular ionic-framework ionic4 qr-code

我正在尝试生成二维码并在 ionic 组件中显示它。我尝试了以下库 https://www.npmjs.com/package/ngx-qrcode2

但它似乎没有正确识别元​​素。我试过:

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

error

还有:

  <ngx-qrcode 
  [elementType]="elementType" 
  [value] = "value"
  cssClass = "aclass"
  errorCorrectionLevel = "L">

运行时出现以下错误:

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'value' since it isn't a known property of 'ngx-qrcode'.

  1. If 'ngx-qrcode' is an Angular component and it has 'value' input, then verify that it is part of this module.
  2. If 'ngx-qrcode' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ngx-qrcode [ERROR ->][value]="value">

我知道这个库现在已经被弃用了,所以我试过了 https://www.npmjs.com/package/@techiediaries/ngx-qrcode

类似的结果:

enter image description here

enter image description here

库在组件模块中导入如下:

import { UbicacionPageRoutingModule } from './ubicacion-routing.module';

import { UbicacionPage } from './ubicacion.page';
import { UbicacionAltaComponent } from './ubicacion-alta/ubicacion-alta.component';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { VerQrUbicacionModalComponent } from './ver-qr-ubicacion-modal/ver-qr-ubicacion-modal.component';

@NgModule({
  entryComponents: [UbicacionAltaComponent, VerQrUbicacionModalComponent],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    UbicacionPageRoutingModule,
    NgxQRCodeModule
  ],
  declarations: [UbicacionPage, VerQrUbicacionModalComponent],
  exports: [ UbicacionAltaComponent, VerQrUbicacionModalComponent]
})
export class UbicacionPageModule {}

最佳答案

  1. 使用 ngx-qrcode 而不是 ngx-qrcode2(已弃用)
  2. 确保您已导入App Module 和您的Component Module

关于angular - 在无法识别的 ionic 5 错误元素中显示二维码 ngx-qrcode,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63018176/

相关文章:

angular - 剑道 : Insert a FormGroup at a top into a FormArray

使用 Reactive Form 的 Angular 自定义异步验证并在服务方法中等待

ionic-framework - 当用户单击手机后退按钮时,ionic 4 处理模态

android - 当应用程序在 ionic 4 中关闭时,如何在后台使用套接字服务推送通知?

javascript - 如何使用 ionic Media 插件顺序播放多个音频

angular - 在 DragulaService.setOptions 中访问 this 的值

angular - 我们真的需要 URL 重写模块来在 IIS 上托管 Angular 应用程序吗?

cordova - 添加cordova平台浏览器时出错, "Error loading cordova-browser"

css - 字体不适用于 ionic/phonegap 应用程序

javascript - 带有左右箭头的文本框-Ionic4