Angular 2: Unhandled Promise rejection: Cannot assign to a reference or variable

Question

I have an Ionic 2 app with a barcode reader and I'm trying to display data when I ecnountered this:

Unhandled Promise rejection: Cannot assign to a reference or variable! ; Zone: ; Task: Promise.then ; Value: Error: Cannot assign to a reference or variable!

I'm not sure exactly what's wrong but here's my template. I know when I remove the [[(ngModel)]="val" the problem goes away:

<ion-grid padding>
    <ion-col col-8 offset-2>
        <ion-item *ngFor="let val of keys">
            <ion-label stacked>{{ val }}</ion-label>
            <ion-input [(ngModel)]="val" [value]="val"></ion-input>
        </ion-item>
    </ion-col>
</ion-grid>

...and here is my component and the relevant functions:

ngOnInit(clientService) {
    this.scanner.scan().then((barcodeData) => {
        this.barcodeData = barcodeData.text;
        this.parseBarcode(this.barcodeData);
    }, 
    (err) => {
        this.clientService.handleResponse(`Ut Oh.. could not initialize barcode reader !: ${err}`)

        // dummy data for testing on laptop when no scanner available
        this.barcodeData = "1159,NAME_HERE,5/16/2017 9:52 AM,111.6,18.6,17.4,19.4,Underfat,92.2,1,59.5,66.4,87.6,4.6,-1,1267,24.8,5.0,15.6,14.8,,25.8,5.2,15.0,14.2,,19.3,1.2,4.2,4.0,,19.0,0.8,4.2,4.0,,11.7,7.0,53.2,50.8,20.0,";

        this.parseBarcode(this.barcodeData);
    });
}

parseBarcode(data) {
    let trimmed_data = this.trimTrailingComma(data);
    let split_data = trimmed_data.split(",");
    let len = split_data.length;

    if ( len == this.cols.length ) {
        this.finalData = this.createDataHash(this.cols, split_data)
        this.keys = Object.keys(this.finalData);
        this.success = true;
    } else {
        console.log(`Off by ${len - this.cols.length}`)
    }
}

trimTrailingComma(str) {
    if ( str[str.length - 1] == "," ) {
        return str.substring(0, str.length - 1);
    }
}

createDataHash(cols, data) {
    let dataHash = {}

    for ( let i in cols ) {
        dataHash[cols[i]] = data[i]
        console.log(dataHash)
    }

    return dataHash
}

Here are the column titles in case that's where the problem arises:

this.cols = [
        'someID',
        'Full Name',
        'Date & Time',
        'Weight (lb)',
        'Body Mass Index (BMI)',
        'Body Fat (%)',
        'Fat Mass (lb)',
        'Body Fat Range',
        'Fat Free Mass (lb)',
        'Visceral Fat Rating',
        'Body Water (%)',
        'Body Water (lb)',
        'Muscle Mass (lb)',
        'Bone Mass (lb)',
        'Muscle Score',
        'Basal Metabolic Rate (kcal)',
        'Right Leg Fat (%)',
        'Right Leg Fat Mass (lb)',
        'Right Leg Fat Free Mass (lb)',
        'Right Leg Muscle Mass (lb)',
        'Right Leg Impedance (?)',
        'Left Leg Fat (%)',
        'Left Leg Fat Mass (lb)',
        'Left Leg Fat Free Mass (lb)',
        'Left Leg Muscle Mass (lb)',
        'Left Leg Impedance (?)',
        'Right Arm Fat (%)',
        'Right Arm Fat Mass (lb)',
        'Right Arm Fat Free Mass (lb)',
        'Right Arm Muscle Mass (lb)',
        'Right Arm Impedance (?)',
        'Left Arm Fat (%)',
        'Left Arm Fat Mass (lb)',
        'Left Arm Fat Free Mass (lb)',
        'Left Arm Muscle Mass (lb)',
        'Left Arm Impedance (?)',
        'Trunk Fat (%)',
        'Trunk Fat Mass (lb)',
        'Trunk Fat Free Mass (lb)',
        'Trunk Muscle Mass (lb)',
        'Body Fat Goal (%)',
    ]

Answer 1

ngModel will look for a field inside your component to evaluate. So when you are writing [(ngModel)]="val" ngModel will look for this.val inside your component which you don't have.