angular - Angular2 Template parse error after error code removed -


i'm working ng2 , kendo-ui grid component. i've had no issues until went add property kendo grid component, , seem stuck in strange compiler fugue state.

error in chrome dev console:

unexpected character "a" ("     </kendo-grid-column>   </kendo-grid     [error ->]approwclick     [ngstyle]="{       'height': showadditionalfilters ? 'calc(100vh - 280px)' : 'calc("): ng:///foobarmodule/foobarcomponent.html@214:4 unexpected character "eof" (do have unescaped "{" in template? use "{{ '{' }}") escape it.) ("       'width': 'calc(100vw - 130px)'}">  </div> [error ->]"): ng:///foobarmodule/foobarcomponent.html@220:0 invalid icu message. missing '}'. ("       'width': 'calc(100vw - 130px)'}">  </div> [error ->]"): ng:///foobarmodule/foobarcomponent.html@220:0     @ syntaxerror (compiler.es5.js:1690)     @ directivenormalizer.normalizeloadedtemplate (compiler.es5.js:14132)     @ compiler.es5.js:14118     @ object.then (compiler.es5.js:1679)     @ directivenormalizer.normalizetemplateonly (compiler.es5.js:14118)     @ directivenormalizer.normalizetemplate (compiler.es5.js:14100)     @ compilemetadataresolver.loaddirectivemetadata (compiler.es5.js:15129)     @ compiler.es5.js:26806     @ array.foreach (<anonymous>)     @ compiler.es5.js:26805

foo.bar.html (with ngstyle): 

  <kendo-grid     approwclick     [ngstyle]="{        'height': showadditionalfilters ? 'calc(100vh - 280px)' : 'calc(100vh - 180px)',        'width': 'calc(100vw - 130px)'}"     [data]="griddata"     [selectable]="true"     [sortable]="true"     (selectionchange)="selectionchange($event)"     (datastatechange)="datastatechange($event)">...</kendo-grid>

so remove entire [ngstyle] input expect resolve issue, i'm still receiving error. code doesn't exist anywhere else in app.

does know issue? i've tried restarting ng serve , refreshing browser, neither seem work.

foo.bar.html (without ngstyle):

  <kendo-grid     approwclick     [data]="griddata"     [selectable]="true"     [sortable]="true"     (selectionchange)="selectionchange($event)"     (datastatechange)="datastatechange($event)">...</kendo-grid>

you can't have newlines inside binding expressions

[ngstyle]="{    'height': showadditionalfilters ? 'calc(100vh - 280px)' : 'calc(100vh - 180px)',    'width': 'calc(100vw - 130px)'}"

should be

[ngstyle]="{ 'height': showadditionalfilters ? 'calc(100vh - 280px)' : 'calc(100vh - 180px)', 'width': 'calc(100vw - 130px)'}"

Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more