Problemas aula 6

Olá Ricardo!

O erro que vc está tendo é o Cannot read property 'titulo' of undefined

Este erro acontece pois vc está tentando acessar o valor de foto.titulo através atributo do input [value]. Porém não existe ainda um valor definido para foto.titulo neste momento.

Uma dica que ele dá em seguida é em foto.component.ts é iniciar as propriedades com strings vazias, como o exemplo abaixo:

foto.component.ts

    @Input() titulo: string = '';
    @Input() url: string = '';
    descricao: string = '';

Depois o professor ensina no curso como fazer isso de maneira mais adequada com ngModel.

Veja se isto resolve para você seguir os próximos videos!

Abraços e bons estudos!

Obrigado pelo retorno Vanessa, mas eu já tinha setado o foto componente como vc indicou.

import { Component, Input } from '@angular/core';

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

    @Input() titulo: string = '';
    @Input() url: string = '';
    descricao: string = '';
}

Porem continua com erro. :/

Que engraçado, pois é apenas isto mesmo. Você já tentou desligar e ligar o compilador do typescript? Limpar o cache do navegador? As vezes esses problemas acontecem no Angular tambem (cache etc)

Limpei o cache e reiniciei a minha maquina mas não resolveu. Buscando no Google encontrei essa solução:

<input [value]="foto?.titulo" class="form-control"  autocomplete="off">

E isso resolveu meu problema, mas ainda não entendi o que esta acontecendo... :/

Sim, você tem o código no github, ou algo assim para eu testar aqui?

Tenho o código que produzi neste curso aqui: https://github.com/vanessametonini/estudos-angular2/

Aqui tem minhas alterações desta parte: https://github.com/vanessametonini/estudos-angular2/commit/9dcd7e407b3e0ae7aa09ca02ac25574115a3a4f5

Veja se ajuda encontrar alguma coisa no seu projeto.

Vanessa subi o meu codigo no git: https://github.com/jjalmeida/estudo-angular-2. Se conseguir dar uma olhada eu agradeço. Também vou ver o seu projeto e tentar achar o erro.

tks.

Oii Ricardo! Acho que consegui encontrar alguns problemas.

Vi que no terminal, tinha alguns erros e comecei a corrigi-los.

1)O primeiro erro era esse:

app/app.component.ts(4,15): error TS2304: Cannot find name 'module'.

Consegui corrigir executando este comando dentro da pasta client: npm i @types/node --save

Este comando instala os @types como dependência do projeto no package.json e com isso o module.id começa ficar disponível pra toda app.

2) O segundo erro no terminal era esse:

app/foto/foto.pipes.ts(10,63): error TS2339: Property 'includes' does not exist on type 'string'.

Ele não estava encontrando o método includes de tipos string. Então vi que isto é um problema relacionado a versão javascript que o typescript está configurado para compilar. E no projeto estava versão 5, e na versão 5 as strings ainda não tinham esse método includes.

Então no arquivo: tsconfig.json tem que atualizar o target para es6, dessa maneira:

"target": "es6",

E foi!

Retirei os ? de cadastro.component.html e não obtive o erro que vc estava tendo. Cliquei no cadastrar e no console do navegado apareceu o objeto vazio. Que está correto. Depois, segui para o próximo exercício que é fazer o two-way data-binding com o $event, onde vamos poder ver o FotoComponent preenchido no console. Seus inputs deverão estar assim para ver este resultado:

<div class="form-group">
    <label>Título</label>
    <input 
    (input)="foto.titulo = $event.target.value"
    [value]="foto.titulo" 
    class="form-control"  
    autocomplete="off">    
</div>
<div class="form-group">
    <label>URL</label>
    <input 
    (input)="foto.url = $event.target.value"
    [value]="foto.url" 
    class="form-control"  
    autocomplete="off">
</div>
<div class="form-group">
    <label>Descrição</label>
    <textarea 
    (input)="foto.descricao = $event.target.value"
    [value]="foto.descricao" 
    class="form-control"  
    autocomplete="off">
    </textarea>
</div>

Bom, acho que agora vai! haha

fico aguardando seu retorno! :)

Olá meu aluno! Clonei seu projeto, removi os ? que você colocou nas propriedades e tudo funcionou perfeitamente.

Qual navegador você esta usando?

Você vai apagar a pasta node_modules e vai fazer:

npm install

depois

npm run typings install

Pode ficar tranquilo que mais de 500 alunos passaram dessa parte sem problema algum. Aliás, você é o primeiro a reportar este tipo de problema. Vamos descobrir o que é.

Os problemas que a Vanessa encontrou são relacionados ao ambiente local dela, que talvez só aconteçam na máquina dela. E parece que o problema não tem a ver com a configuração, mas sim com alguma coisa da sua máquina ou algum passo que você fez que não esta claro para nós.

Agora, de nada vai adiantar qualquer alteração se você não estiver com o compilador em tempo real do TypeScript funcionando, porque ele não refletirá nos js suas alterações. Você realizou as alterações com ele rodando?

Obrigado Vanessa e Flavio! Testei as duas soluções e ambas funcionaram.