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

Declare variable in custom template in Angular 2
Handle multiple service calls to bind to a list in Angular2
access key value of object
Setting class on ion-item when using *ngFor
TS2304: Cannot find name 'describe' in Webpack / Angular 2
Selectors name when naming directives
How to Authenticate Angular 2 with Firebase API using Auth0
Include user_metadata and app_metadata in JWT using Auth0
Primeng component calendar have a method for close the pop up calendar manually?
Angular test does not include import from node_modules
Convert Angular 4 web app to Angular Universal app
Generate a routing module while creating a module in angular-cli
What is the best practice to manage sessions with Ionic 2
Angular 2 Updating Component After Form Submit With New Data From Response
How to configure and use Auth-0 in Angular4
How to get meta tags work correctly in angular 2? [closed]

Categories

HOME
react-native
git
rstudio
google-analytics
veins
netlogo
sharppcap
freeswitch
dfa
mutex
contiki
aurelia-router
apache-apex
amazon-sqs
video-processing
fix
executable-jar
systemml
dht
sqlanywhere
mysql-error-1064
unimrcp
amazon-lightsail
scons
github-api
http-caching
ctype
footable
neo4jclient
ggiraph
phpexcel-1.8.0
street-address
direct3d9
filestream
james
regedit
xfs
caliburn.micro
inline
exceljs
run-configuration
subtitle
measurement-studio
wamp-protocol
oltp
release-management
zoo
ngdoc
unite.vim
express-stormpath
motorola
launch-agent
aide-ide
gio
decompression
mockery
video-recording
mapfragment
amazon-mobile-analytics
listboxitem
couchbase-sync-gateway
gridster
datamapper
realbasic
jedit
7digital
merit-gem
aloha-editor
materialized-views
event-loop
enplug-sdk
coderunner
vin
spool
function-prototypes
jaggery-js
usleep
aglio
raii
parallel.for
countries
dynamic-html
kendo-tooltip
apprequests
windmill
java-service-wrapper
icarousel
git-add
contentflow
rails-models
validationsummary
zend-navigation
dynamic-css
paint.net
windows-2000
jquery-ui-plugins
open-basedir

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