CODEWITHSUNDEEP
angular
kamil
kamil

Reputation: 81

Angular service data not updating

I have two method: getUserProfile which returns the user profile and updateProfile which updates user data.
UpdateProfile method works correctly because it displays valid updated data in the database. I'm having a problem with the getUserProfile method, because after calling the updateProfile method the updated data in the component is not displayed, but displays the data before the changes Data not updated correctly. Only when I log out of the application and log in again It will display updated data. I think the problem is with localstorage and userToken value because it is cleared after logout. And only after re-logging the getUserProfile method is called again and works correctly.Changed data in database after calling updateProfile

Component class: 

      export class AccountComponent implements OnInit {
      userData: any;
      profileForm: FormGroup;
      constructor(private formBuilder: FormBuilder, private authenticationService: AuthenticationService, private router: Router) { }
      ngOnInit() {
      this.formInitBuilder();
        this.authenticationService.getUserProfile().subscribe( (data: any) => {
          this.userData = data;
          this.profileForm.setValue({
            username: data.UserName,
            email: data.Email,
            firstName: data.FirstName,
            lastName: data.LastName
          });
          console.log(data);
        });

      }
      formInitBuilder() {
        this.profileForm = this.formBuilder.group ({
          username: [ '' ],
          email: [ '' ],
          firstName: [ '' ],
          lastName: [ '']
        });
      }
      onSubmit(registrationForm: FormGroup) {
        if (registrationForm.valid) {
        this.authenticationService.updateProfile(this.profileForm.value).
         subscribe(() => {
          this.router.navigate(['/home']);
          });
        }
      }
}

Service class: 

      getUserProfile() {
    return this.http.get(this.rootUrl + '/api/GetUserClaims',
    {headers: new HttpHeaders({'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('userToken'))})});
  }
  updateProfile(userData) {
    const profile = {
      Username: userData.username,
      Email: userData.email,
      FirstName: userData.firstName,
      LastName: userData.lastName,
    };
    const reqHeader = new HttpHeaders({'Content-Type': 'application/json'});
    return this.http.post(this.rootUrl + '/api/ChangeProfile', profile, {headers: reqHeader});
  }

Web Api:

    [HttpGet]
    [Route("api/GetUserClaims")]
    public AccountModel GetUserClaims()
    {
        var identityClaims = (ClaimsIdentity)User.Identity;
        IEnumerable<Claim> claims = identityClaims.Claims;
        AccountModel model = new AccountModel()
        {
            UserName = identityClaims.FindFirst("Username").Value,
            Email = identityClaims.FindFirst("Email").Value,
            FirstName = identityClaims.FindFirst("FirstName").Value,
            LastName = identityClaims.FindFirst("LastName").Value,
            LoggedOn = identityClaims.FindFirst("LoggedOn").Value
        };
        return model;
    }

Upvotes: 0

Views: 88

Answers (1)

ukn
ukn

Reputation: 1793

I might be missing something but the call to your api is only made once, don't expect your data to be updated unless you call getUserProfile again. When you refresh, your getUserProfile is executed and get the data you updated using updateProfile.

Upvotes: 1

Related Questions