Как привязать к одному полю ввода в 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>

Затем в файле сценария вместоссылка inputVen использование ven.total;

var total = parseFloat(ven.total);

Answer 2

Причина, по которой вы видите одно и то же значение в каждом поле, заключается в том, что к каждому входу привязана одна и та же модель (inputVen).

Посмотрите на часть [(ngModel)].Каждый вход связан с inputVen.Я предполагаю, что у каждого вена есть поле, которое должно быть моделью, например, ven.inputVen.

С уважением

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 в массив значений;

• Измените * 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>

Обратите внимание, что вы можете получить индекс для for с помощью "let i = index". Таким образом, вы можете сделать несколько привязок в массиве TypeScript. Вы можете получить больше информации о ngFor здесь: https://coryrylan.com/blog/angular-ng-for-syntax Надеюсь, это поможет.