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

Edicão de dados

Bom dia! Estou tentando desenvolver um cadastro, entretanto apesar do meu JSON estar sendo retornado corretamente no construtor do meu Component:

 constructor(private http:Http, private actRoute: ActivatedRoute){

        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');


        actRoute.params.subscribe(param => {
            this.id = param['id'];
            console.log('id buscado: ' + this.id);    

            if(this.id){
                this.http.
                    get('http://localhost:3000/usuario/' + this.id)
                    .subscribe(res => {
                        console.log('Usuario carregado do banco');
                        console.log(res.json());
                        this.usuario = res.json();
                    }, 
                    err => console.log(err));
            }
        },
        err => console.log(err));

    }

JSON:

Array[1]
0:
Object_id: "58d9c9248afeeb218bcbf86c"
email: "ajolie@mail.com"
nome: "Angelina"
senha: "123"
sobrenome: "Jolie"
__proto__: Object
length:1
__proto__: Array[0]

Template do componente:

<div class="container form-layout">
  <h2>Controle de usuários</h2>

  <p *ngIf="mensagem.length" class="alert alert-info">{{mensagem}}</p>

  <form (submit)="cadastrar($event)">
    <div class="form-group">
      <label for="nome">Nome</label>
      <input name="nome" [(ngModel)]="usuario.nome" value={{usuario.nome}} class="form-control">
    </div>
    <div class="form-group">
      <label for="sobrenome">Sobrenome</label>
      <input name="sobrenome" [(ngModel)]="usuario.sobrenome" class="form-control">
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input name="email" [(ngModel)]="usuario.email"class="form-control">
    </div>
    <div class="form-group">
      <label for="senha">Senha</label>
      <input type="password" name="senha" [(ngModel)]="usuario.senha" class="form-control">
    </div>
    <button class="btn btn-primary">Cadastrar Usuário</button>
  </form>
</div>

Porém, quando a tela é carregada os dados não aparecem.

Um detalhe importante é q no componente se eu seto na mão por exemplo:

this.usuario.nome = 'calopsita';

O texto é exibido no campo correspondente no template HTML do componente.

Alguém tem idéia do q possa ser???

3 respostas
solução!

Faça assim, por exemplo

usuario[0].email

Você devolve um array com o dado que precisa. O ideal era devolver o objeto e não o array.

Abraço neu aluno.

Dito e feito, Flavio! Só alterei na minha api o tipo de retorno (de array para o elemento a ser editado) e tudo funcionou. Afinal de contas, o Angular não fez "Curso Mãe Dinah" pra saber qual o elemento em uma lista eu queria que ele carregasse, né??

Realmente és cangaceiro nesse negócio de JS. Grande abraço, e obrigado mais uma vez pela ajuda.

Perfeito! Agora é continuar com o projeto.

Sucesso e bom estudo meu aluno !