Problem implementing Angular editing

Question

Look at the image below;

When clicking edit in addition to being directed to the editing page was to load the form, but the form is not being loaded, and see how it is.

It was supposed to look like this;

I don’t know what’s wrong, I need help.

This is the method in the service class.

 editEvento(token, id, evento){
      let params = JSON.stringify(evento);
      let headers = new Headers({
        'Content-Type':'application/json',
        'Authorization': token
      });

      return this._http.put(this.url+'evento/'+id, params, {headers: headers})
               .map(res => res.json());
    }

This is my component class.

import { desaparecer } from './../../animation';
import { environment } from './../../../environments/environment';

import { Evento } from './../../models/evento';
import { UploadService } from './../../core/upload.service';
import { EventoService } from './../../core/evento.service';
import { UserService } from './../../core/user.service';
import { Component, DoCheck, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {

  public title: string;
  public evento: Evento;
  public identity;
  public token;
  public url: string;
  public status;
  public is_edit;

  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _userService: UserService,
    private _eventoService: EventoService,
    private _uploadService: UploadService
  ) {
      this.is_edit = true;
      this.title = 'Atualizar Evento';
      this.evento = new Evento('','','',2018,'', '');
      this.identity = this._userService.getIdentity();
      this.token = this._userService.getToken();
      this.url = environment.url;
  }


  ngOnInit() {
    this.getEvento();
  }


  getEvento() {
    this._route.params.forEach((params: Params) => {
      let id = params['id'];

      this._eventoService.getEvento(id).subscribe(
        response => {
          if (!response.evento) {
            this._router.navigate(['/home']);
          } else {
            this.evento = response.evento;
          }
        },
        error => {
          console.log(<any>error);
          this._router.navigate(['/home']);
        }
      );

    });
  }


  onSubmit(){
    var id = this.evento._id;
    this._eventoService.editEvento(this.token, id, this.evento).subscribe(
        response => {
          if (!response.evento) {
            this.status = 'error';
          } else {
            this.status = 'success';
            this.evento = response.evento;

            // Subir imagen do evento
            if (!this.filesToUpload) {
            this._router.navigate(['/evento', this.evento._id ]);
            } else {
            // Subida de la imagen
            this._uploadService.makeFileRequest(this.url+'upload-image-evento/'+ this.evento._id, [], this.filesToUpload, this.token, 'image')
                .then((result: any) => {
                    this.evento.image = result.image;
                    this._router.navigate(['/evento', this.evento._id ]);
                  });
              }
            }
      },
      error => {
        var errorMessage = <any>error;

        if(errorMessage != null){
          this.status = 'error';
        }
      }
      );
    }

  public filesToUpload: Array<File>;
    fileChangeEvent(fileInput: any){
      this.filesToUpload = <Array<File>>fileInput.target.files;
    }




}

And click here to access my repository.

Answer 1

According to the image provided, it seems that your html (Edit.component.html) is with the default html that the angular created.