angular


Parser Error: Got interpolation ({{}}) where expression was expected


I'm using ng-bootstrap as a substitute for ui-bootstrap in angular2.
My html is as follows:
<ul class="list-inline">
<li class="tag" ngb-dropdown auto-close="outsideClick" *ngFor="let item of ['Elastic Search','Database Theory','CVS'];let $index=index;" [ngClass]="{'default-tag': $index==0, 'matched-tag': $index==1, 'unmatched-tag': $index==2 }">
<a href ngb-dropdown-toggle id="desiredSkill{{$index}}">
<i class="bi_interface-tick following"></i> {{item}} <i class="bi_interface-more tag-menu-icon"></i>
</a>
<ul class="dropdown-menu tag-menu" ngb-dropdown-menu [aria-labelledby]="desiredSkill{{$index}}">
<li><a href>Follow Skill</a></li>
<li><a href>Related Jobs</a></li>
</ul>
</li>
</ul>
But when I run my app I get following error:
main.browser.ts:25Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in
JobDescription#174:77 ("
][aria-labelledby]="desiredSkill{{$index}}">
"): JobDescription#174:77
Parser Error: Unexpected token '{' at column 13 in [desiredSkill{{$index}}] in JobDescription#174:77 ("
][aria-labelledby]="desiredSkill{{$index}}">
"): JobDescription#174:77
Can't bind to 'aria-labelledby' since it isn't a known property of 'ul'. ("
][aria-labelledby]="desiredSkill{{$index}}">
"): JobDescription#174:77
Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in
JobDescription#174:77 ("
<div class="row">
<div class="col-lg-4 col-xs-4" [ERROR ->]*ngFor="let i of [0,1,3]">
<img src="http://ecx.images-amazon.com/images/I/81VFU9"):
JobDescription#215:49
Parser Error: Unexpected token '{' at column 13 in [desiredSkill{{$index}}] in JobDescription#174:77 ("
<div class="row">
<div class="col-lg-4 col-xs-4" [ERROR ->]*ngFor="let i of [0,1,3]">
<img src="http://ecx.images-amazon.com/images/I/81VFU9"):
JobDescription#215:49
Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in
JobDescription#174:77 ("
ERROR ->="main.applyJob()">Apply for job
ERROR ->="main.applyJob()">Apply for job
][hidden]="!ifNotApplied">Applied
][hidden]="!ifNotApplied">Applied
][hidden]="!ifNotUploaded">Upload CV
][hidden]="!ifNotUploaded">Upload CV
Have questions about this job?
[ERROR ->]
Have questions about this job?
[ERROR ->]
You can't use interpolation inside standart property binding. There should be expression.
Seems it should be:
[aria-labelledby]="'desiredSkill' + $index"
or
aria-labelledby="desiredSkill{{$index}}"
I think you forgot to declare index of ngFor
*ngFor="let item of ['Elastic Search','Database Theory','CVS'];let $index=index" ...
also use,
[attr.aria-labelledby]="desiredSkill{{$index}}"

Related Links

Using angular cli for component libraries
Browser back button only works on Chrome (not IE 11 or Safari or Firefox)
The new Router Component for Angular2 does not seem to have provision for templateUrl .
Using Angular 2 Material 2 Alpha 5 with Angular 2 RC 2
FormControl in Angular 2
Angular2 http json request
Angular 2 John Papas' Seed Project with simple Apache Server
Angular2 is converting an Array to String
Show page not found in Angular2
Angular2 SELECT OPTION after pipe executes
Angular2 - EXCEPTION: TypeError: Cannot read property 'screen' of undefined
Angular 2: onChanges() is not reflecting Object value changes
How to call ViewChild in runtime?
Angular2 not detecting change to object value
Getting values of looped template using angular2 forms
Breeze and Angular2

Categories

HOME
qt5
java-ee
phpunit
luigi
uitableview
castle-windsor
imageview
inform7
formula
distributed-database
purescript
netfilter
webassembly
xamarin.mac
batch-normalization
riscv
licode
bind
derivative
konvajs
cloudify
google-nativeclient
media
cut
revit
google-surveys
ractivejs
sandbox
size-classes
jointjs
ireport
hipchat
sqlcmd
youtube-analytics
gooddata
templating
notnull
caliburn.micro
itunes-store
evosuite
family-tree
appharbor
lpc
spectral-density
matlab-uitable
javac
sp-executesql
lab-color-space
on-screen-keyboard
collaborative-filtering
gyp
google-chrome-arc
onbeforeunload
giflib
ubuntu-15.10
throttle
timedelta
idfa
rc4-cipher
tvml
ibm-jazz
octopress
gridster
mks-integrity
zurb-foundation-5
nameerror
undefined-symbol
adobe-dps
foundation
unexpectendoffile
html5-template
dotdotdot
protection
cordova-chrome-app
reagent
.a
lastaccesstime
maven-site-plugin
grunt-contrib-cssmin
class-relationship
function-prototypes
unassigned-variable
casbah
maptiler
spn
harfbuzz
panning
maskedinput
pull-to-refresh
dynamic-languages
jquery-textext
trusted-timestamp
keymando
launching-application
function-overloading
wind-river-workbench
soaplite
cgpoint
windows-explorer
entityreference
validationsummary
incremental-linking
uint32
habari
maintaining-code
pvcs

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App