Ionic 2 中具有多个字段的条码扫描器答案

【问题标题】：Barcode scanner with more than one field in Ionic 2Ionic 2 中具有多个字段的条码扫描器
【发布时间】：2018-10-19 03:21:33
【问题描述】：

我的条码扫描器插件 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>

如果我扫描条码第一个相同的值出现在第二个条码值上。是否有任何使用离子表达式中的任何内容来避免这些。条码字段是根据数据类型“条码”动态生成的。

如果两个字段带有数据类型“条形码”，它将生成两个字段，如上。问题是如果我扫描一个字段，则该值同时应用于所有其他字段

【问题讨论】：

别以为跟插件有什么关系。 2 个字段需要两个不同的变量，而不是一个 scannedbarCode
字段是动态的。它可能取决于用户...可能 2 个字段有时 10 个字段。所以我如何管理这种动态情况。我的意思是如何处理这个变量
在item 对象中有一个附加字段？或者维护一个单独的数组
项目对象中的附加字段。
pastebin.com/D2mUHtkb

标签： angularjs ionic-framework ionic2 ionic3 angular2-forms

【解决方案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;
        }
    }
}

【讨论】：