Template parse errors: Unexpected character "EOF"
Asked on November 22, 2018
Hello,
I am using [ngClass] based on conditions using indexOf. I am using disabled class if the result indexOf is not equals to -1. If it is equals to -1 , I am using enabled class. My code is as follows:
<a (click)="selectLocationId(location.pk_location_id, location.locationname, location.locationcode)" [ngClass]="{'disabled' : disabledLocations.indexOf(location.pk_location_id)!= -1, 'enabled' : disabledLocations.indexOf(location.pk_location_id) === -1}">{{ location.locationname + location.pk_location_id + disabledLocations[0]}}</a>With this code it is returning result of indexOf as -1, even though the value exists in array. Because I should pass value in quotes, if I put quotes, it is giving following error :Template parse errors: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("I tried following ways but getting same error:[1] [ngClass]="{'disabled' : disabledLocations.indexOf(""+location.pk_location_id+"")!= -1, 'enabled' : disabledLocations.indexOf(""+location.pk_location_id+"") === -1}">{{ location.locationname }}</a>[2] [ngClass]="{'disabled' : disabledLocations.indexOf("'"+location.pk_location_id+"'")!= -1, 'enabled' : disabledLocations.indexOf("'"+location.pk_location_id+"'") === -1}">{{ location.locationname }}</a>[3] [1] [ngClass]="{'disabled' : disabledLocations.indexOf("location.pk_location_id")!= -1, 'enabled' : disabledLocations.indexOf("location.pk_location_id") === -1}">{{ location.locationname }}</a>[4] [ngClass]="{'disabled' : disabledLocations.indexOf('location.pk_location_id')!= -1, 'enabled' : disabledLocations.indexOf('location.pk_location_id') === -1}">{{ location.locationname }}</a>How to resolve this?Please provide solution for solving this issue.Thanks & Regards,Shilpa Kulkarni
Replied on November 22, 2018
The code
<a (click)="selectLocationId(location.pk_location_id, location.locationname, location.locationcode)" [ngClass]="{'disabled' : disabledLocations.indexOf(location.pk_location_id)!= -1, 'enabled' : disabledLocations.indexOf(location.pk_location_id) === -1}">{{ location.locationname + location.pk_location_id + disabledLocations[0]}}</a>
Looks fine.
You should test the result of below code, why it is wrong.
{{ disabledLocations.indexOf(location.pk_location_id) }}
What values are there in disabledLocations and location.pk_location_id ?
Provide sample values.
Replied on November 22, 2018
I tested the same in ts file if write code as alert("index of 16 is "+this.disabledLocations.indexOf('16')); // and get its index.
It is giving proper index value of 16.
But if I write as alert("index of 16 is "+this.disabledLocations.indexOf(16)); // and get its index.
it will return -1.
Following are the values of array disabledLocations:
Array(22)
0: "16"
1: "6"
2: "1"
3: "24"
4: "22"
5: "5"
6: "2"
7: "3"
8: "11"
9: "9"
10: "12"
11: "32"
12: "35"
13: "31"
14: "25"
15: "30"
16: "27"
17: "34"
18: "28"
19: "29"
20: "10"
21: "37"
length: 22__proto__: Array(0)
location array contains following values:
[16, 6, 1, 26, 4, 24, 22, 5, 2, 3, 11, 9, 12, 32, 35, 31, 25, 30, 23, 27, 34, 28, 29, 10, 37]
Replied on November 22, 2018
I have resolved the issue by adding function to check given location is disabled or not. My code is as follows:
<a (click)="selectLocationId(location.pk_location_id, location.locationname, location.locationcode)" [ngClass]="getClass(location.pk_location_id)">{{ location.locationname }}</a>
public getClass(locationID) {
let index = this.disabledLocations.indexOf(""+locationID+"");
console.log("index is:"+index);
if (index === -1){
return 'enabled';
}
return 'disabled';
}
