2016-04-19 7 views
1

Я пытаюсь получить данные из REST API с помощью angular2, все до сих пор идет хорошо; Однако, у меня есть ошибка, которая показывает на консоли только при вызове {{content.img.url}} он выполняет штраф на веб-странице только как это принести URL изображения, которая должна быть извлечена и показывает изображение, но в хромированной консоли показывает:TypeError: Не удается прочитать свойство 'url' undefined

EXCEPTION: TypeError: Cannot read property 'url' of undefined in [background-image: url('{{content[img].url}}'); in [email protected]:29]

У меня действительно нет идеи, почему он показывает ошибку только в консоли! любые идеи для решения этой проблемы?

Ниже вы можете найти подробную информацию о том, что я на самом деле делаю, чтобы получить данные с помощью API REST, предложения по улучшению кода приветствуются!

home.html

<div *ngFor="#content of c1"> 
<div class="cards" style="background-image: url('{{content.img.url}}');"> 
<div class="txt">{{content.c1Name}}</div></div> 
</div> 

home.js

export class HomePage { 
static get parameters(){ 
return [[Http]]; 
} 

constructor(http) { 
this.http = http; 
this.c1 = null; 
//this is a bad way to do it as _defaultOptions is Protected, is there any way to do it better? 
this.http._defaultOptions.headers.append('X-Parse-Application-Id', 'appk'); 
this.http._defaultOptions.headers.append('X-Parse-REST-API-Key', 'apikey'); 

this.http.get('https://example.com/classes/table').subscribe(data => { 
    this.c1 = data.json().results; 
}); 

} 

Выход извлеченной JSON

0:Object 
    createdAt:"2016-01-08T13:55:53.558Z" 
    c1Name:"Jack" 
    img:Object 
    __type:"File" 
    name:"tfss-6a8bf-1db8-4545-91e6-18-file.jpg" 
    url:"http://files.parsetfss.com/f213b50e-dsdsdas-23fsrfdfd-d/file.jpg" 
    objectId:"3mfH4sd23" 
    updatedAt:"2016-01-08T17:21:00.678Z" 
+0

«Выбранный JSON» соответствует содержимому свойства 'c1'? –

+0

@ThierryTemplier да! –

ответ

1

мне удалось решить проблему с помощью оператора Элвиса (то) в моем случае я использовал:

{? {Content.img .url}}

Надеется, что это помогает кто-то!

0

сообщение говорит о content[img].url в вашем сообщении, и я могу видеть, что вы использование content.img.url. Все по-другому. Я имею в виду, что второй получает доступ к свойству img объекта content. Первый - свойство с именем, указанным в переменной img.

Я ожидаю, что content[img] возвращает null, особенно если img имеет значение null или undefined. В то время как это не относится к content.img.

Вы не должны использовать выражение content[img].

Посмотрите это plunkr: http://plnkr.co/edit/IFAuvA36YXelXkUG4HfN?p=preview.

+0

Я уже пытался использовать контент [img] .url, но получил ту же ошибку ИСКЛЮЧЕНИЕ: TypeError: Невозможно прочитать свойство «url» неопределенного в [background-image: url ('{{content [img] .url }} '); в HomePage @ 63: 29] –

+0

, но странно, что content.img.url отлично работает при извлечении данных и получении URL-адреса, но единственная проблема, с которой я столкнулся, ошибка, которая отображается на консоли! –

Смежные вопросы