Javascript 如何在ngFor中绑定到一个输入框

有人能帮我写一些代码吗？我有一个简单的ngfor表，表中有一个输入，我绑定了值。问题是，输入是由ngfor生成的，当我输入任何一个输入字段时，所有字段中都填充了相同的值。我怎样才能阻止这种情况发生？我只想在一个字段中键入

这是到目前为止我的代码

拍摄照片{ let选项：CameraOptions={ 质量：15， destinationType:this.camera.destinationType.FILE\u URI， 编码类型：this.camera.encodingType.JPEG， mediaType:this.camera.mediaType.PICTURE， 来源类型：1， CameradDirection:this.camera.Direction.BACK } this.camera.getPictureoptions.thenimageData=>{ console.log'imageData:'，imageData； this.imageData=normalizeURLimageData； console.log'normalizaimagedata:'，this.imageData； var venName=供应商； // var-tok=localStorage['token']； //const params=新表单数据； //参数追加'token'，tok； //参数。追加'vendor'，venName； //参数。附加'total'，'599'； //参数。追加'slip'，this.imageData； const fileTransfer:FileTransferObject=this.transfer.create； var total=parseFloatthis.inputVen； let选项1:FileUploadOptions={ fileKey:“slip”， 文件名：“name.jpeg”， chunkedMode:false， mimeType:image/jpeg， 标题：{'token'：tok，'vendor'：venName，'total'：total} }; //让alert=this.alerCtrl.create{ //标题：文名+总计， // }; //警惕。在场； fileTransfer.uploadthis.imageData，'http://192.168.0.7:8080/static/images/ionicfile.jpg，选项1 .thendata=>{ console.logJSON.stringifydata+上传成功； //this.imageFileName=http://192.168.0.7:8080/static/images/ionicfile.jpg 控制台日志数据； 让alert=this.alerCtrl.create{ 标题：JSON.stringifydata， }; 警惕。在场； this.inputVen=； }，err=>{ console.logerr； 让alert=this.alerCtrl.create{ 标题：JSON.stringifyerr， }; 警惕。在场； }; }，err=>{ log'error:'，JSON.stringifyerr； }; } 厂商名称 全部的 滑倒 {{ven.vendor}}

---

您可以执行以下操作：

在值数组中转换输入

将*ngFor更改为以下内容：

请注意，可以使用let i=index在for上获取索引。这样，您就可以在TypeScript数组上执行多个绑定。 您可以在此处获得有关ngFor的更多信息：

---

希望这能有所帮助。

问题在于您将*ngFor中的每个输入绑定到模型中的相同值inputVen。示例中并不完全清楚您想要做什么，但我假设您正在尝试更新供应商的total属性

尝试绑定到ven.total或任何您想要更新的ven的适当属性，而不是inputVen

---

您可以更改模板以使用ngFor中的索引，然后在thr NgModel中使用索引绑定数组，并更改组件以将inputVen创建为数组并设置其长度

//template
<tr *ngFor="let ven of VendorsS; let i = index">
    <td> {{ven.vendor}}
    </td>
    <td ><input type="type" placeholder="Total" [(ngModel)]="inputVen[i]" size="6px"/></td>
    <td>
        <button (click)="takePictureFromCamera(ven)">
        <ion-icon ios="ios-camera" md="md-camera"></ion-icon>
        </button>
    </td>
</tr>

//component
inputVen = []
...
this.inputVen = Array(this.VendorsS.length)

---

在每个字段中看到相同值的原因是，每个输入都有相同的模型inputVen绑定

看看[ngModel]部分。每个输入都绑定到inputVen。我猜每个ven都有一个字段，应该是像ven.inputVen这样的模型

问候

<tr *ngFor="let ven of VendorsS">
  <td> {{ven.vendor}}
  </td>
  <td ><input type="type" placeholder="Total" [(ngModel)]="ven.total" size="6px"/></td>
  <td>
     <button (click)="takePictureFromCamera(ven)">
        <ion-icon ios="ios-camera" md="md-camera"></ion-icon>
     </button>
  </td>

var total = parseFloat(ven.total);

//template
<tr *ngFor="let ven of VendorsS; let i = index">
    <td> {{ven.vendor}}
    </td>
    <td ><input type="type" placeholder="Total" [(ngModel)]="inputVen[i]" size="6px"/></td>
    <td>
        <button (click)="takePictureFromCamera(ven)">
        <ion-icon ios="ios-camera" md="md-camera"></ion-icon>
        </button>
    </td>
</tr>

//component
inputVen = []
...
this.inputVen = Array(this.VendorsS.length)