Angular2:Uncaught(承诺):评估不支持报价!在组件中

Question

我有一个具有输入参数的组件:

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

在父组件中,我已将图像路径传递给它,如下所示:

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

问题是,当我运行它时,它抱怨:

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

所以我该怎么做？

更新:当我[imageURI]='image_path'在父组件中删除它时它工作正常,它完美地显示组件的其余部分

Answer 1

您应该comment将父组件中的标记更改为:

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

分配模板绑定时,请勿使用单引号.只使用它们来格式化字符串,如下所示:

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

Answer 2

有人在谷歌搜索这个错误:错误包含没有有用的信息,并且可能由于许多不同的原因而被抛出,因此在我的情况下,仅通过查看HTML就无法弄明白.但是,如果你把一个断点在浏览器中装入的角度文件(在我的情况下compiler.umd.js,线11702,见expression_converter.ts中@angular/compiler模块,线路395,功能visitQuote()是什么引发异常),您可以钻到ast它具有性能参数调用location并uninterpretedExpression帮助您缩小导致此问题的组件和表达式.在我的情况下,它缺少ngClass参数周围的花括号.