javascript - ngFor中如何绑定(bind)一个输入框

Question

有人可以帮我写一些代码吗，我有一个简单的 ngfor带有我绑定(bind)值的输入的表问题是因为输入是由 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 中的每个输入绑定(bind)到模型中的相同值 inputVen。从示例中尚不完全清楚您要执行的操作，但我假设您正在尝试更新 vendor 的 total 属性。

尝试绑定(bind)到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>

然后在您的脚本文件中，不要引用 inputVen，而是使用 ven.total;

var total = parseFloat(ven.total);