Angular2: Недоступно (в обещании): Котировки не поддерживаются для оценки! в компоненте

У меня есть компонент, который имеет входной параметр:

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' в родительском компоненте, и отлично показывает остальную часть компонента.

Ответы

Ответ 1

Вы должны изменить свой тег comment в родительском компоненте на это:

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

Не используйте одинарные кавычки при назначении привязки шаблона. Используйте их только для форматирования строк, например так:

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

Ответ 2

Любая ошибка в этой ошибке: ошибка не содержит полезной информации и может быть выбрана по разным причинам, поэтому в моем случае было невозможно выяснить, просто глядя на HTML. Однако если вы поместите контрольную точку в файл angular, загруженный в ваш браузер (в моем случае compiler.umd.js, строка 11702, см. expression_converter.ts в модуле @angular/compiler, строка 395, функция visitQuote(), что и вызывает исключение), вы можете сверлить в параметр ast, который имеет свойства с именем location и uninterpretedExpression, которые помогут вам сузить, какой компонент и выражение вызывают это. В моем случае отсутствовали фигурные скобки вокруг параметра ngClass.

Ответ 3

Я получил свой ответ. Возвращается к моему родительскому компоненту: правильный формат

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

а затем установить свойство:

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

Ответ 4

Я также столкнулся с той же ошибкой, например:

Ошибка HTML-код был:

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

фиксированный код: решение ниже работает для меня. Действие происходит из файла .ts как стиль должен быть [ngStyle] чтобы мы могли напрямую передавать значение элемента.

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