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

Question

我有一个带有条形码阅读器的 Ionic 2 应用程序，当我遇到这个时我正在尝试显示数据:

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

我不确定到底出了什么问题，但这是我的模板。我知道当我删除 [[(ngModel)]="val" 时问题就消失了:

<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>

...这是我的组件和相关功能:

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
}

以下是列标题，以防出现问题:

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 将在您的组件内寻找一个字段进行评估。因此，当您编写 [(ngModel)]="val" 时，ngModel 将在您的组件中查找 this.val 而您不会有。