Сканер штрих-кода с несколькими полями в Ionic 2 - PullRequest
Новая
       20

Сканер штрих-кода с несколькими полями в Ionic 2

0 голосов
/ 09 мая 2018

enter image description here

Мой плагин сканера штрих-кода Файл машинописи 

     scanBarCode() {
        this.barcodeScanner.scan().then(barcodeData => {
          this.scannedbarCode = barcodeData.text;
        }, (err) => {
            console.log('Error: ', err);
        });
      }

clearbar(){

  this.scannedbarCode= null;
}

Моя сторона HTML сканера штрих-кода 

 <ion-item *ngIf='item.datatype == "barcode"'>
         <ion-label  floating><b>{{item.label}}</b></ion-label>
           <button  ion-button small item-right color="primary" (click)="scanBarCode()">Scan Barcode</button>
           <button  ion-button small item-right color="danger" (click)="clearbar()">Clear</button>   
           <ion-input type="text" value={{scannedbarCode}}></ion-input>       
       </ion-item>

Если яОтсканированный штрих-код одно и то же значение приходит на второе значение штрих-кода. Если есть какие-либо, чтобы избежать этого, используя что-либо внутри ионного выражения. Поле штрих-кода генерируется динамически в соответствии с типом данных «штрих-код».

Если два поля приходятс типом данных "штрих-код" он сгенерирует два поля, как указано выше. Проблема в том, что если я сканировал одно поле, значение применяется одновременно ко всем другим полям

1 Ответ

0 голосов
/ 09 мая 2018

Опираясь на комментарий @Suraj Rao, вам нужно будет управлять отсканированным значением штрих-кода для каждого элемента. Это предложение о том, как вы можете это сделать:

  1. Ваша структура данных для this.main2 должна будет включать 2 новых поля:

    • id: уникальный идентификатор для каждого элемента
    • scannedBarCode: значение штрих-кода для каждого элемента

  2. В вашем .html при сканировании или очистке штрих-кода вам нужно будет передать item.id в качестве параметра и использовать item.scannedBarCode в качестве входного значения

  3. На вашем .ts, при сканировании или очистке штрих-кода, вам нужно будет выполнить итерацию и получить элемент на основе заданного id

this.main2: 

this.main2 =[
   { id: "1", label: "Scan barcode one", datatype: "barcode", lookupname: "null", order: "11", scannedBarCode: null, validations: Array(1) },
   { id: "2", label: "Scan barcode two", datatype: "barcode", lookupname: "null", order: "10", scannedBarCode: null, validations: Array(1) },
];

.html 

<ion-item *ngIf='item.datatype == "barcode"'>
  <ion-label floating>
    <b>{{item.label}}</b>
  </ion-label>
  <button ion-button small item-right color="primary" (click)="scanBarCode(item.id)">Scan Barcode</button>
  <button ion-button small item-right color="danger" (click)="clearbar(item.id)">Clear</button>
  <ion-input type="text" value={{item.scannedBarCode}}></ion-input>
</ion-item>

.ts 

scanBarCode(id) {
    this.barcodeScanner.scan().then(barcodeData => {
        for (var i = 0; i < this.main2.length; i++) {
            if (this.main2[i].id == id) {
                this.main2[i].scannedBarCode = barcodeData.text;
                break;
            }
        }
    }, (err) => {
        console.log('Error: ', err);
    });
}

clearbar(id) {
    for (var i = 0; i < this.main2.length; i++) {
        if (this.main2[i].id == id) {
            this.main2[i].scannedBarCode = null;
            break;
        }
    }
}
...