CODEWITHSUNDEEP
angulartypescript
user5363938
user5363938

Reputation: 841

Angular2: Uncaught (in promise): Quotes are not supported for evaluation! in the component

I have a component which has an input parameter:

import {Component,Input} from '@angular/core';

@Component({
    selector: 'comment' ,
    template: `    
        <div class="col-lg-6 col-md-6 col-xs-6 thumb">
            <div class="post-owner">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                          <img class="media-object rounder" src=imageURI >
                        </a>
                    </div>
                </div>
            </div>
        </div>`
})

export class CommentCompoent{
    @Input() imageURI="";
}

And in the parent component I have passed a image path to it like this:

<comment [imageURI]='image_path'></comment>

The problem is, when I run it, it complains with:

EXCEPTION: Error: Uncaught (in promise): Quotes are not supported for evaluation!

So what should I do?

Update: It works fine when I remove [imageURI]='image_path' in the parent component, and it shows the rest of component perfectly

Upvotes: 26

Views: 44981

Answers (4)

Poul Kruijt
Poul Kruijt

Reputation: 71961

You should change your comment tag in the parent component to this:

<comment [imageURI]="image_path"></comment>

Don't use single quotes when assigning a template binding. Only use them to format strings, like this:

<comment [imageURI]="'path/to/image.jpg'"></comment>

Upvotes: 53

user5363938
user5363938

Reputation: 841

I got my answer. It comes back to my parent component: The right format is 

<comment [imageURI]=image_path></comment>

export class SinglePictureComponent{
    username='Salman kkk';
    profile_pic="https://scontent-arn2-1.cdninstagram.com/t51.2885-19/s150x150/13743117_1060048037418472_411027981_a.jpg";
    comment="I love you";
}

and then set the property is:

 <comment [username]=username   [comment]=comment [imageURI]=profile_pic></comment>

Upvotes: 3

Vinod
Vinod

Reputation: 1290

I have also faced the same error, like this:

enter image description here

The error-proned html code was:

<div class="container">
  <span class="value">{{action.progress}}</span>
  <div class="wrap">
    <div class="bar" style="{{width:action.progress}}"></div>
  </div>
</div>

fixed code: the solution below worked for me. Action is coming from .ts file as style should be [ngStyle] so we can directly pass item value.

<div class="container">
  <span class="value">{{action.progress}}</span>
  <div class="wrap">
    <div class="bar" [ngStyle]="{width:action.progress}"></div>
  </div>
</div>

Upvotes: 0

Boris
Boris

Reputation: 1210

Anyone googling this error: the error contains no useful information and could be thrown for many different reasons so in my case it was impossible to figure out by just looking at the HTML. However if you put a breakpoint in the angular file loaded in your browser (in my case compiler.umd.js, line 11702, see expression_converter.ts in the @angular/compiler module, line 395, function visitQuote() which is what throws the exception) you can drill into the ast parameter which has properties called location and uninterpretedExpression that help you narrow down which component and expression are causing this. In my case it was missing curly braces around an ngClass parameter.

Upvotes: 20

Related Questions