angular - Angular2: Obetald (i löftet): Citattecken stöds inte för utvärdering! i komponenten

Jag har en komponent som har en inparameter:

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

Och i föräldrakomponenten har jag skickat en bildsökväg till den på detta sätt:

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

Problemet är att när jag kör det klagar det med:

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

Så vad ska jag göra?

Uppdatering: Det fungerar bra när jag tar bort [imageURI]='image_path' i föräldrakomponenten, och det visar resten av komponenten perfekt

Svar #1

Du bör ändra din comment-tagg i föräldrakomponenten till detta:

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

Använd inte enkla citattecken när du tilldelar en mallbindning. Använd dem endast för att formatera strängar, som detta:

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

Svar #2

Alla som googlar detta fel: felet innehåller ingen användbar information och kan utlöstas av många olika anledningar, så i mitt fall var det omöjligt att ta reda på bara genom att titta på HTML. Men om du sätter en brytpunkt i Angular-filen som laddas i din webbläsare (i mitt fall compiler.umd.js, rad 11702, se expression_converter.ts i @angular/compiler-modulen, rad 395, funktionen visitQuote() som är den som kastar undantaget) kan du gå in i ast-parametern som har egenskaper kallade location och uninterpretedExpression som hjälper dig att begränsa vilken komponent och uttryck som orsakar detta. I mitt fall saknades krullparenteser runt en ngClass-parameter.

Relaterade artiklar