j'arrive à récupérer un utilisateur mais impossible d'avoir accès aux données utilisateur

je peux le faire coté vue avec

mais je doit mettre en place des données formulaire par défault dans le component à cause du formControlName

pour le moment j'ai fait ça

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { User } from '../../shared/interfaces/user.interface';
import { AuthService } from '../../shared/services/auth.service';

@Component({
  selector: 'app-profil',
  templateUrl: './profil.component.html',
  styleUrls: ['./profil.component.scss'],
})
export class ProfilComponent implements OnInit {
  public user$: Observable<User | null> = this.authService.user$.asObservable();

  
  user = this.user$.subscribe(
    (value) => {
      this.user$ = value;
    },
    (error) => {
      console.log('Uh-oh, an error occurred! : ' + error);
    },
    () => {
      console.log('Observable complete!');
    }
  );  
  

  constructor(private authService: AuthService, private fb: FormBuilder) {
    //const prenom = this.user$.username
    //this.user$.subscribe(vausername => this.user$.username);

    

    
  }

  public form: FormGroup = this.fb.group({
    prenom: ['Frederic', 
    [
      Validators.required,
      Validators.minLength(4),
      Validators.pattern('^[a-zA-Z]+$'),
    ]],
    username: ['', 
    [
      Validators.required,
      Validators.minLength(4),
      Validators.pattern('^[A-Za-z0-9]*$')
    ]],
    email: ['',
    [
      Validators.required,
      Validators.email
    ]],
    password: ['', 
      [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(30),
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}'),
    ]],
  });

  ngOnInit(): void {}

  public submit() {
    console.log(this.form.getRawValue());
  }

}

mais j'ai une erreur ligne 18

error TS2740: Type 'User' is missing the following properties from type 'Observable<User>': _isScalar, source, operator, lift, and 6 more.

-
Edité par AaFredericHusson 22 octobre 2021 à 15:44:25

Bonjour,

user = this.user$.subscribe(
  (value) => {//ici value est un User, pas un observable, de plus tu regarde quand user$ change pour le faire changer à nouveau avec sa nouvelle valeur oO
    this.user$ = value;
  },
  (error) => {
    console.log('Uh-oh, an error occurred! : ' + error);
  },
  () => {
    console.log('Observable complete!');
  }
); 

Commençons par parler du AuthService. Ce service doit retourner un user ou / et un observable d'user. Comme user n'est pas sensé changer beaucoup, on peut faire comme ça :

@Injectable({
    providedIn: 'root',
})
export class AuthService {
    private _user: User | null = null;//privé parce que c'est au service de modificer cette variable

    private async load() {//ici tu vas charger l'utilisateur, d'où le async
        if (this._user) return;//si c'est déjà load, on a pas besoin de reload

        [...]

    }

    async getUser(): User  {//si on veut l'utilisateur en objet, on passe une copie pour que _user ne soit jamais modifié
        await this.load();//pour que ce soit bien load

        return {
            ...this._user
        }
    }

    async getObsUser(): Observable<User> {//si on veut un observable d'user
        await this.load();

        return of(this._user)
    }
}

Maintenant, dans ton composant, ce qui t'intéresse c'est d'avoir l'utilisateur. C'est lors de l'initialisation que l'on veut subscribe à un observable (ou attendre d'avoir l'utilisateur). On ne met jamais d'asynchrone avant.

export class ProfilComponent implements OnInit {
  user: User | null = null;

  constructor(private authService: AuthService, private fb: FormBuilder) {}

  ngOnInit() {
    this.authService.getObsUser().subscribe((user) => {
    //ou this.authService.getUser().then((user) => {
      this.user = user;
    });
  }
}

On ne vas pas modifier user ou l'observable, on récupère juste une variable. Si tu veux modifier user, il faut que tu call une méthode du service AuthService pour modifier user.

Passe voir un peu la doc à l'occasion, elle est sympa : https://angular.io/docs 

-
Edité par piero5673 22 octobre 2021 à 18:19:03