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.
this.http.get<Object[]>(url)
porthis.http.get<Usuario[]>(url)