Can anyone lend a hand with some code? I'm working on a straightforward table using ngFor, but I'm facing an issue with input binding. The problem is that all the input fields generated by ngFor display the same value when typing. How can I prevent this and ensure each field behaves independently?
Below is the code snippet I have so far:
Here's my JavaScript function:
function takePictureFromCamera(ven) {
let options: CameraOptions = {
quality: 15,
destinationType: camera.DestinationType.FILE_URI,
encodingType: camera.EncodingType.JPEG,
mediaType: camera.MediaType.PICTURE,
sourceType: 1,
cameraDirection: camera.Direction.BACK
}
camera.getPicture(options).then((imageData) => {
console.log('imageData: ', imageData);
this.imageData = normalizeURL(imageData);
console.log('normalized imageData: ', this.imageData);
var venName = ven.vendor;
var tok = localStorage['token'];
const fileTransfer: FileTransferObject = 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 }
};
fileTransfer.upload(this.imageData, 'http://192.168.0.7:8080/static/images/ionicfile.jpg', options1)
.then((data) => {
console.log(JSON.stringify(data) + " Uploaded Successfully");
console.log(data);
let alert = alerCtrl.create({
title: JSON.stringify(data),
});
alert.present();
this.inputVen = '';
}, (err) => {
console.log(err);
let alert = 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>