Ionic 2多字段条码扫描器：扫描值同步显示问题咨询

嗨，这个问题很好解决！核心原因是你现在用了一个全局的scannedbarCode变量来存储扫描结果，所有动态生成的条码输入框都绑定了同一个变量，所以扫完一个之后所有框都会同步显示。咱们可以给每个条码字段单独分配存储值，具体操作如下：

1. 给每个条码项添加独立的存储属性 #

首先，确保循环里的每个item对象都有一个专属属性来存放它自己的扫描值，比如scannedValue。如果初始数据里没有这个属性，你可以在组件初始化或者生成item列表时补上：

// 示例：遍历items，给条码类型的项初始化scannedValue
this.items.forEach(item => {
  if (item.datatype === "barcode") {
    item.scannedValue = null;
  }
});

2. 修改扫描和清空方法，针对当前项操作 #

把原来的方法改成接收当前item作为参数，这样就能精准操作对应项的专属属性：

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

clearbar(item: any){
  item.scannedValue = null;
}

3. 更新HTML模板，绑定到当前项的专属属性 #

把输入框的绑定值和点击事件都改成针对当前item，这里推荐用双向绑定[(ngModel)]，这样手动修改输入框内容也能同步到item属性里：

<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)">Scan Barcode</button>
  <button ion-button small item-right color="danger" (click)="clearbar(item)">Clear</button>
  <ion-input type="text" [(ngModel)]="item.scannedValue"></ion-input>
</ion-item>

这样修改后，每个条码字段都有自己独立的存储值，扫描或清空操作只会影响当前点击的那个字段，就不会出现所有输入框同步显示的问题啦！

内容的提问来源于stack exchange，提问作者Arjun Ramdas