如何绑定到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（或任何你想要更新的相应的属性）而不是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);

Answer 2

你可以做到以下几点：

• 在一组值中转换inputVen;
• 将您的* ngFor更改为以下内容：

   <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中的索引，然后在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)

Answer 4

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

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

问候