Ioni c Qr Code Generator - Как использовать фиксированное значение? - PullRequest
Новая
       5

Ioni c Qr Code Generator - Как использовать фиксированное значение?

0 голосов
/ 17 марта 2020

Добрый день,

Я пытаюсь создать карту, которая отображает QR-код с фиксированным значением. Плагин, который я нашел, берет значение из входа и кнопки, есть ли способ изменить js, чтобы он брал вход из фиксированного значения?

home.page. html

<ion-card-content>
<div class="ion-padding">
    <ion-input type="text" placeholder="My QR data" [(ngModel)]="qrData">
    </ion-input>


    <button ion-button full icon-left (click)="createCode()">
        <ion-icon name="barcode"></ion-icon>Create
    </button>

    <ion-card>
      <div align='center'>
        <ngx-qrcode [qrc-value]="createdCode">
        </ngx-qrcode>
      </div>
        <ion-card-content>
            <div align='center'> ID: {{ createdCode }} </div>
        </ion-card-content>
    </ion-card>

home.page.ts 

    import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  qrData = null;
  createdCode = null;
  scannedCode = null;

  constructor(private barcodeScanner: BarcodeScanner) {}

  createCode () {
    this.createdCode = this.qrData;
    console.log(this.createdCode);
  }

}

Спасибо заранее за помощь!

1 Ответ

0 голосов
/ 17 марта 2020

Часть ioni c и часть qrcode не связаны. Удалите ввод и кнопку и просто привяжите постоянную строку к [qrc-value]. Обратите внимание на одинарные кавычки внутри двойных кавычек в [qrc-value]="'fixed value'". Он обозначает использование буквальной строки 'fixed value'

<ion-card-content>
<div class="ion-padding">
    <ion-card>
      <div align='center'>
        <ngx-qrcode [qrc-value]="'fixed value'">
        </ngx-qrcode>
      </div>
        <ion-card-content>
            <div align='center'> ID: fixed value </div>
        </ion-card-content>
    </ion-card>

Рабочий пример: Stackblitz

...