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

Question

有人可以帮助我一些代码，我有一个简单的ngfor表与输入，我绑定的值的问题是，因为输入是由ngFor生成的，当我在任何输入字段中输入相同的值在所有字段中填充。我如何才能阻止这种情况的发生，我只想在一个字段中键入。

到目前为止，以下是我的代码

​

takePictureFromCamera(ven) {
  let options: CameraOptions = {
    quality: 15,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: 1,
    cameraDirection: this.camera.Direction.BACK
  }

  this.camera.getPicture(options).then((imageData) => {
    console.log('imageData: ', imageData);
    this.imageData = normalizeURL(imageData);
    console.log('normaliza imageData: ', this.imageData);

    var venName = ven.vendor;
    //
    var tok = localStorage['token'];
    // const params = new FormData();
    // params.append('token', tok);
    // params.append('vendor', venName);
    // params.append('total', '599');
    // params.append('slip', this.imageData );


    const fileTransfer: FileTransferObject = this.transfer.create();
    var total = parseFloat(this.inputVen);

    let options1: FileUploadOptions = {
      fileKey: 'slip',
      fileName: 'name.jpeg',
      chunkedMode: false,
      mimeType: "image/jpeg",
      headers: { 'token': tok, 'vendor': venName, 'total': total }
    };

    // let alert = this.alerCtrl.create({
    //     title: venName + total,
    // });
    // alert.present();

    fileTransfer.upload(this.imageData, 'http://192.168.0.7:8080/static/images/ionicfile.jpg', options1)
      .then((data) => {
        console.log(JSON.stringify(data) + " Uploaded Successfully");
        // this.imageFileName = "http://192.168.0.7:8080/static/images/ionicfile.jpg"

        console.log(data);

        let alert = this.alerCtrl.create({
          title: JSON.stringify(data),
        });
        alert.present();

        this.inputVen = '';

      }, (err) => {
        console.log(err);

        let alert = this.alerCtrl.create({
          title: JSON.stringify(err),
        });
        alert.present();

      });
  }, (err) => {
    console.log('error: ', JSON.stringify(err));
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.11/angular.min.js"></script>
<table>
   <tr >
      <th>Vendor Name</th>
      <th>Total</th>
      <th>Slip</th>
   </tr>
   <tr *ngFor="let ven of VendorsS">
      <td> {{ven.vendor}}
      </td>
      <td ><input type="type" placeholder="Total" [(ngModel)]="inputVen" size="6px"/></td>
      <td>
         <button (click)="takePictureFromCamera(ven)">
            <ion-icon ios="ios-camera" md="md-camera"></ion-icon>
         </button>
      </td>
   </tr>
   <tr>
</table>

​

Answer 1

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

尝试绑定到ven.total (或者您想要更新的任何适当的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>

然后在脚本文件中，使用ven.total而不是引用inputVen；

var total = parseFloat(ven.total);

Answer 2

您可以执行以下操作：

• 将inputVen转换为值数组；
• 将* to更改为以下值：

   <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>

请注意，您可以使用"let i= index“在for上获取索引。这样，您就可以在TypeScript数组上执行多个绑定。你可以在这里获得更多关于ngFor的信息：https://coryrylan.com/blog/angular-ng-for-syntax希望这能有所帮助。

Answer 3

您可以更改模板以使用ngFor中的索引，然后在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)