Как убедиться, что установщик сделан перед использованием getter в Angular 8 - PullRequest
Новая
       0

Как убедиться, что установщик сделан перед использованием getter в Angular 8

0 голосов
/ 25 марта 2020

Каждый раз, когда я вызываю свой геттер, мне возвращают неопределенное значение. У меня есть установщик в одном из моих сервисов, и я хочу установить переменную, тогда, когда я использую функцию получения, я хочу вернуть эту переменную. Я считаю, что проблема заключается в том, что мой установщик работает асинхронно, поэтому он не устанавливает мою переменную до того, как мне нужно будет использовать получатель. Я запутался в том, как убедиться, что мой установщик готов, прежде чем я сделаю что-нибудь еще. Я чувствую, что должен использовать обещание, но не понимаю, как это сделать. Может быть, я просто делаю это неправильно все вместе. 

// team-member.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const TEAM_API_URL = 'http://127.0.0.1:8080/api/team';

@Injectable({
  providedIn: 'root'
})

export class TeamMemberService {
  memberPermissions: any; // Variable that is returned as undefined.

  constructor(private http: HttpClient) {
    this.setTeamMemberPermissions = JSON.parse(localStorage.getItem('jwt')).user['username'];
    console.log(this.getTeamMemberPermissions); // Only logging for testing purposes. Getter will be used in my components
  } 

  public singleTeamMemberInfo(username: string): Observable<any> {
    return this.http.get<any>(TEAM_API_URL + '/user/list/' + username);
  }

  set setTeamMemberPermissions(username: string) {
    this.singleTeamMemberInfo(username).pipe(map((r => {
      this.memberPermissions = r['results'][0].permission;
    }))));
  }

  get getTeamMemberPermissions() {
    return this.memberPermissions;
  }
}

Ответы [ 2 ]

1 голос
/ 25 марта 2020

Проблема в том, что вы не подписываетесь на наблюдаемую singleTeamMemberInfo, поэтому http-запрос не выполняется и код из pipe никогда не вызывается. Вам следует заменить pipe(map..) на subscribe

. Если вы хотите проверить правильность установки значения, удалите console.log из конструктора и переместите его в setTeamMemberPermissions setter

Попробуйте этот код 

set setTeamMemberPermissions(username: string) {
  this.singleTeamMemberInfo(username).subscribe(
    r => {
       this.memberPermissions = r['results'][0].permission
       console.log(this.getTeamMemberPermissions)
  });
}

Редактировать

Если вы хотите подождать, пока не установится memberPermission, вы должны сохранить memberPermission в BehaviorSubject 

// team-member.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {BehaviorSubject, Observable} from 'rxjs';
import { map } from 'rxjs/operators';

const TEAM_API_URL = 'http://127.0.0.1:8080/api/team';

@Injectable({
  providedIn: 'root'
})

export class TeamMemberService {

  // Store the member permission in BehaviorSubject
  private memberPermissions = new BehaviorSubject<any>(null); // Variable that is returned as undefined.

  constructor(private http: HttpClient) {
    this.setTeamMemberPermissions();
  }

  public singleTeamMemberInfo(username: string): Observable<any> {
    return this.http.get<any>(TEAM_API_URL + '/user/list/' + username);
  }

  private setTeamMemberPermissions() {
    const username = JSON.parse(localStorage.getItem('jwt')).user['username'];
    this.singleTeamMemberInfo(username).subscribe(
      r => {
        const permissions = r['results'][0].permission;
        this.memberPermissions.next(permissions)
      }
    )
  }

  get teamMemberPermissions$(): Observable<any> {
    return this.memberPermissions.asObservable();
  }
}


// In your component
export class TeamMemberComponent implements OnInit{

  constructor(private teamMemberService: TeamMemberService) {}

  ngOnInit() {
    this.teamMemberService.teamMemberPermissions$
      .subscribe(value => console.log(value))
  }
}
0 голосов
/ 25 марта 2020

Вы должны контролировать, как асин c код работает вместе, сеттера и геттера в этом случае недостаточно, вы можете попробовать BehaviorSubject()

//set up with an initial false value
memberPermissions=new BehaviorSubject(null)

//it'll only emit when there is a truthy value
getMemberPermission=memberPermisssion.pipe(fliter(value=>!!value))

// when you get your permission from http call 
// you just call .next()
this.http.get<any>(TEAM_API_URL + '/user/list/' + username)
.subscribe(p=>memberPermissions.next(p));
...