Return service variables to the Angular2 component

Question

Return service variables to the Angular2 component

Navigation

#1 by (1 votes)

0

I am doing an authentication service, if it is correct it allows you to continue, but if not, you can get several messages, The problem is that I do not know how to take the service variables to the component so that I can show it in the view.

Service:

 export class DataService {

  public errorMessage: string;
  public showAlert: boolean = false;

 public checkCredentials(url:string, username:string, password:string):Observable<any>{

    return this.http.get<Object>(url).pipe(tap (users => { 

      const checkCookie = this.cookie.get('login');

      if (users.find(u => u.user === username)) {
          this.usuario = users.find(u => u.user === username);
          if (username === this.usuario.user && 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;
      }

      return this.errorMesssage;

     }));

1º Here I have to send the Message and the boolean and I only have a return.

2nd Also gives error else {

   this.errorMesssage = 'Se han introducido unas credenciales incorrectas';

The error is:

La propiedad "errorMesssage" no existe en el tipo "DataService". ¿Quería decir "errorMessage"?

3º How to receive service returns in the component.

  const url = 'assets/users.json';
  this.service.checkCredentials(url,this.username,this.password).subscribe();

Edited - >

Service:

public checkCredentials(url:string, username:string, password:string):Observable<any>{

    return this.http.get<Object>(url).pipe(tap (users => { 

      const checkCookie = this.cookie.get('login');
      let messageError = { message:"", showAlert:false };
      if (users.find(u => u.user === username)) {
          this.usuario = users.find(u => u.user === username);
          if (username === this.usuario.user && password === this.usuario.pass && !checkCookie) {
            this.cookie.set('login', this.usuario.mail);
            this.router.navigate(['configuration']);
          } else {
            messageError.message = "Se han introducido unas credenciales incorrectas";
            messageError.showAlert= true;
          }
      } else { 
        messageError.message = "El usuario introducido no se ha encontrado";
        messageError.showAlert= true; 
      }

        return messageError;

     }));
 }

Component

 public checkCredentials = function () {
        const url = 'assets/users.json';
        this.service.checkCredentials(url, this.username, this.password).subscribe(result => {
            console.log('result', result); //Devuelve a los usuarios
            this.errorMessage = result.message;
            this.showAlert = result.showAlert;
        });
    }

If instead of using tap use map, an error in the find or that or all the code is put in red

typescript angular

asked by EduBw 25.06.2018 в 13:36

source

1 answer

Tour a json rescuing the last repeated Obtain data from a regular expression

score 1 · Accepted Answer

If you want your return to return several parameters, it is best to create an Interface

export interface Error {
  message: string,
  showAlert: boolean
}

But if you think it is not necessary you can return the object as follows:

 let messageError = {message:"Error", showAlert:true};
  return messageError;

To read the result in the component, you have to do it in the following way:

  const url = 'assets/users.json';
  this.service.checkCredentials(url,this.username,this.password).subscribe(result => {
    let mensajeError = result.message;
    let showAlerrt = result.showAlert;
});

Edited. Use map instead of tap if you want to return an object different from the one you receive.

public checkCredentials(url:string, username:string, password:string):Observable<any>{

    return this.http.get<any>(url).pipe(map (users => { 

      const checkCookie = this.cookie.get('login');

      if (users.find(u => u.user === username)) {
          this.usuario = users.find(u => u.user === username);
          if (username === this.usuario.user && 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;
      }

      return this.errorMesssage;

     }));

I hope it works for you.