0

Estoy moviendo el código del componente al servicio y como todo lo hacía el componente , no había ningún problema con el paso de la información a la vista.

Ahora al mover el código al servicio resulta que obtengo diversos errores:

El código original es :

export class Usuario {
    user: string;
    name: string;
    mail: string;
    pass: string;
}

LoginComponent implements OnInit {
    public username: string;
    public password: string;
    public errorMessage: string;
    public showAlert: boolean = false;
    public usuario: Usuario = {
        user: '',
        name: '',
        mail: '',
        pass: ''
    }

  public checkCredentials = function() {
    const url = 'assets/users.json';
        this.service.checkCredentials(url).subscribe(users => {
            const checkCookie = this.cookie.get('login');
            if (users.find(u => u.user === this.username)) {
                this.usuario = users.find(u => u.user === this.username);
                if (this.username === this.usuario.user && this.password === this.usuario.pass && !checkCookie) {
                    this.cookie.set('login', this.usuario.mail);
                    this.router.navigate(['configuration']);
                } else {
                    this.errorMesssage = 'Se han introducido unas credenciales incorrectas';
                    this.showAlert = true;
                }
            } else {
                this.errorMessage = 'El usuario introducido no se ha encontrado';
                this.showAlert = true;
            }
        });

Como se puede ver aquí lo hace todo el componente.

Y cambiando el código al servicio quedaría:

Componente:

  public checkCredentials = function() {
    const url = 'assets/users.json';
    this.service.checkCredentials(url).subscribe();
  }

Servicio:

export class Usuario {
  user: string;
  name: string;
  mail: string;
  pass: string;
}


@Injectable()
export class DataService {
  public username: string;
  public password: string;
  public errorMessage: string;
  public showAlert: boolean = false;
  public usuario: Usuario = {
    user: '',
    name: '',
    mail: '',
    pass: ''
}

  constructor(private cookie: CookieService, private http: HttpClient,private router: Router) { }

  public checkCredentials(url:string):Observable<any>{
     return this.http.get<Object[]>(url).pipe(map(users=> { 
      const checkCookie = this.cookie.get('login');
      if (users.find(u => u.user === this.username)) {
          this.usuario = users.find(u => u.user === this.username);
          if (this.username === this.usuario.user && this.password === this.usuario.pass && !checkCookie) {
              this.cookie.set('login', this.usuario.mail);
              this.router.navigate(['configuration']);
          } else {
              this.errorMesssage = 'Se han introducido unas credenciales incorrectas';
              this.showAlert = true;
          }
      } else {
          this.errorMessage = 'El usuario introducido no se ha encontrado';
          this.showAlert = true;
      }
     }));
  }

Los errores son :

 u.user -> no existe en el tipo object
 this.usuario -> object no se puede asignar al tipo usuario
 this.errorMesssage -> No existe en el tipo dataService.

Finalmente cuando se resuelvan los errores, ¿ cómo mando la información a la vista que en el caso de que sea error, showAlert y el mensaje de error se muestre en el html ?

Gracias.

4
  • Prueba a cambiar this.http.get<Object[]>(url) por this.http.get<Usuario[]>(url)
    – Sema
    Commented el 25 jun. 2018 a las 10:42
  • gracias, era eso. =)
    – EduBw
    Commented el 25 jun. 2018 a las 10:52
  • Marca la respuesta como válida para que otros usuarios puedan beneficiarse. Gracias!
    – Sema
    Commented el 25 jun. 2018 a las 10:57
  • pero en el caso de ser incorrecta, cómo mando las variables al componente ?
    – EduBw
    Commented el 25 jun. 2018 a las 11:01

1 respuesta 1

1

Prueba a cambiar:

this.http.get<Object[]>(url)

por

this.http.get<Usuario[]>(url)

Lo que está ocurriendo es que el tipo especificado es Object en lugar de Usuario, y por eso cuando trata de acceder a esos campos, TypeScript esos errores, ya que en el objeto Object no existe el campo "user" (por ejemplo).

5
  • this.errorMesssage , this.showAlert = true; ¿ Cómo mando las variables al componente si falla en el servicio ?
    – EduBw
    Commented el 25 jun. 2018 a las 11:02
  • Lo que el servicio está devolviendo al componente es un Observable, y desde el componente haces la suscripción. Por lo tanto, en caso de error lo que puedes hacer es lanzar un error a través del observable con throw (Observable.throw(new Error({errorMessage: 'error', showAlert: true }))). Cuando te subscribas y se produzca el error, el handler asociado al error se ejecutará.
    – Sema
    Commented el 25 jun. 2018 a las 11:36
  • Enlazo tu misma pregunta aquí
    – Sema
    Commented el 25 jun. 2018 a las 11:37
  • Soy totalmente nuevo, la única forma de manejar errores, fue lo que vi en el tutorial de Héroes y lo sacaba por consola, y eso no me vale..
    – EduBw
    Commented el 25 jun. 2018 a las 11:38
  • Piensa que tienes un return de la petición HTTP, y tal y como indica la signatura de checkCredentials, lo que estás devolviendo es un Observable, por tanto, tu respuesta (sea correcta o sea un error) tiene que ser a través de un observable. Queda a tu elección si quieres separar la respuesta correcta de la incorrecta o devolver siempre un objeto que tiene el flag showAlert a true/false según el resultado. En mi opinión, es preferible separarlo pq te dará más claridad en el componente cuando hagas la subscripción.
    – Sema
    Commented el 25 jun. 2018 a las 12:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.