Solucionado (ver solução)
Solucionado
(ver solução)
13
respostas

Até a injeção de dependência tudo certo.

Agora estou recebendo um erro que parece ser pelo tamanho da msg json. no console não exibe o array. Sabe do que se trata?

[Violation] 'load' handler took 283ms

Não devolve invoca ou não devolve o json array. ou seja não dar erro mais não mostra as imagens

13 respostas

Não entendi o contexto do erro. Pode ser mais detalhista?

Não dar erro, mas não retorna o json array.

Sem um contexto do que você esta fazendo complica. Onde o corre? O bloco do código ?

Mas esse erro ocorre quando uma operação assíncrono demora um absurdo de tempo.

Sem um contexto do que você esta fazendo complica. Onde o corre? O bloco do código ?

Mas esse erro ocorre quando uma operação assíncrono demora um absurdo de tempo.

HTML Gerado

<div class="container">
    <!--template bindings={
  "ng-reflect-ng-for-of": ""
}-->
</div>

Na aplicação do curso, você precisa compartilhar o código que escreveu para eu poder olhar. Compartilhe o código do componente inclusive seu template para que eu possa olhar.

Se for um projeto pessoal, se o seu JSON for gigante, tem que atacar a API do seu servidor.

app.component.ts

insira seu código aqui

import {Component} from '@angular/core'; import {Http} from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: './app.component.html'
})
export class AppComponent{
    fotos: Object[] = [];
    AppComponent(http: Http) {

        http.get('v1/fotos')
        .map(res => res.json())
        .subscribe(fotos =>{
            this.fotos = fotos;
            console.log(fotos);
        },erro => console.log(erro));        
    }
}

Quando compartilhar o código, ele deve vir entre as crases trilas. Você esta inserindo embaixo. Não vai formatar.

//template foto
  <img class="img-responsive center-block" src="{{url}}" alt="{{titulo}}">


//template component
<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
</div>
<div class="container">
    <foto *ngFor="let foto of fotos" url="{{foto.url}}" titulo="{{foto.titulo}}"></foto>
</div>

//app.component.ts
import {Component} from '@angular/core';
import {Http} from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: './app.component.html'
})
export class AppComponent{
    fotos: Object[] = [];
    AppComponent(http: Http) {

        http.get('v1/fotos')
        .map(res => res.json())
        .subscribe(fotos =>{
            this.fotos = fotos;
            console.log(fotos);
        },erro => console.log(erro));        
    }
}
solução!

Onde esta o constructor() de AppComponent? Ficou faltando.

Como não tem constructor() seu código de inicialização da classe nunca será executado.

Exemplo correto:

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: './app.component.html'
})
export class AppComponent {

    fotos: Object[] = [];

    constructor(http: Http) {

        http.get('v1/fotos')
            .map(res => res.json())
            .subscribe(
                fotos => this.fotos = fotos,
                erro => console.log(erro)
            );
    }
}

Funcionou. pensei que o construtor era igual as linguagens tradicionais com JAVA e C#.

Obrigado.