Home  >  Forum  >  Angular
Post New Query

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';
}





Write Answer







©2019 concretepage.com | Privacy Policy | Contact Us