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>

然后在脚本文件中，使用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中的索引，然后在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这样的模型。

致谢

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

4 个答案: