Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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
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 aquiimport {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));
}
}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.