Ionic 2 中具有多个字段的条形码扫描仪

Question

我的条码扫描器插件 Typescript 文件

     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>

如果我扫描了一个条码，第二个条码出现了相同的值value.Is有任何方法可以避免使用ionic中的任何东西expression.The条码字段是根据数据类型动态生成的"barcode".

如果两个字段带有数据类型 "barcode "，它将生成两个字段，如 above.The 问题是，如果我扫描一个字段，值会同时应用于所有其他字段

Answer 1

基于@Suraj Rao 的评论，您将需要管理每个项目的扫描条码值。这是关于如何去做的建议：

您的 this.main2 数据结构需要包含 2 个新字段：
- id: 每个项目的唯一 ID
- scannedBarCode：每个项目的条码值
在您的.html，扫描或清除条码时，您需要将item.id作为参数传递并使用item.scannedBarCode作为您的输入值
在您的.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;
        }
    }
}

Ionic 2 中具有多个字段的条形码扫描仪

Barcode scanner with more than one field in Ionic 2

angularjs

ionic-framework

ionic2

angular2-forms

ionic3