Angular2: Uncaught (promesse): les Guillemets ne sont pas pris en charge pour l'évaluation! dans le composant

J'ai un composant qui a un paramètre d'entrée:

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="";
}

Et dans le composant parent, j'ai passé un chemin de l'image comme cela:

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

Le problème c'est que quand je le lance, il se plaint avec:

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

Alors que dois-je faire?

Mise à jour: Il fonctionne très bien lorsque je l'ai supprimer [imageURI]='image_path' dans le composant parent, et il montre le reste des composants parfaitement

N'avez-vous pas obtenir un indice, à propos de la ligne et de la colonne dans le modèle où l'erreur est provoquée?
Peut-être causé par la faute de frappe dans CommentCompoent (poent au lieu de ponent)? Avez-vous importer ce composant quelque part ou liste dans directives: [...] avec un nom différent?
Peut-être causée par un problème dans le composant parent?
Aussi, src=imageURI devrait être src="imageURI" et je voudrais utiliser des guillemets partout: <comment [imageURI]="image_path"></comment>

OriginalL'auteur user5363938 | 2016-08-09

  1. 22

    Vous devriez changer votre comment balise dans le composant parent:

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

    Ne pas utiliser les guillemets simples lors de l'affectation d'un modèle de liaison. Utiliser uniquement pour les chaînes de format, comme ceci:

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

    OriginalL'auteur PierreDuc

  2. 11

    Quelqu'un googler cette erreur: l'erreur contient aucune information utile et peut être levée pour de nombreuses raisons différentes, donc dans mon cas, il était impossible de comprendre simplement en regardant le code HTML. Cependant, si vous mettez un point d'arrêt dans l'angle de fichier chargé dans votre navigateur (dans mon cas compiler.umd.js, ligne 11702, voir expression_converter.ts dans le @angular/compiler module, la ligne 395, de la fonction visitQuote() qui est ce qui lève l'exception), vous pouvez percer dans le ast paramètre qui a des propriétés appelé location et uninterpretedExpression qui vous aideront à affiner le composant et d'expression sont la cause de cette. Dans mon cas, il manquait des accolades autour d'un ngClass paramètre.

    M'a aidé beaucoup, merci!
    Merci, c'était une bouée de sauvetage!
    Merci une tonne, m'a vraiment aidé à trouver l'erreur.

    OriginalL'auteur Boris

  3. 2

    J'ai eu ma réponse. On en revient à mon composant parent:
    Le format 

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

    et puis définir la propriété est:

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

    OriginalL'auteur user5363938

  4. 0

    J'ai aussi été confronté au même erreur, comme ceci:

    Angular2: Uncaught (promesse): les Guillemets ne sont pas pris en charge pour l'évaluation! dans le composant

    L'erreur-proned code html est:

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

    code fixe: la solution ci-dessous a fonctionné pour moi. L'Action est à venir à partir de .ts fichier en tant que style doit être [ngStyle] on peut donc passer directement la valeur de l'article.

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

    OriginalL'auteur Vinod