Angular 8 проблема с подпиской на переменную в сервисе - PullRequest
0 голосов
/ 21 января 2020

Я изучаю Angular и пытаюсь прослушать переменную, содержащую значение http-запроса. Вот служба

export class UsersService {
 message = new Subject<string>();
 constructor(private http: HttpClient) { }
 addUser(userData: {username, email, password, school}) {
   this.http.post<any>('http://127.0.0.1/apiapp/insert.php', userData).subscribe( (r) => {
     this.message = r.message;
   });
}

Когда я регистрирую сообщение, я получаю success Теперь я хочу вызвать эту функцию и прослушать эту переменную из компонента

result = '';
private resultSubscription: Subscription;

  ngOnInit() {
    this.resultSubscription = this.userS.message.subscribe( (r) => {
      this.result = r;
    });
 }

  addPost(userData: {username: string, email: string, password: string, school: string}) {
    this.userS.addUser(userData);
    console.log(this.result);    
 }

Я получаю пустое данные (ничего не записывается, только пустая строка в консоли). Почему это и как это исправить? Заранее спасибо

1 Ответ

1 голос
/ 21 января 2020

У вас есть 3 проблемы здесь.

  • Вы неправильно отправляете значение через тему
  • у вас возникли асинхронные c проблемы с расположением вашего console.log(this.result)
  • Вы хотите позвонить .asObservable по вашему предмету, чтобы получить предмет как наблюдаемый

    export class UsersService {
        message = new Subject<string>();
        constructor(private http: HttpClient) { }
    
        addUser(userData: {username, email, password, school}) {
            this.http.post<any>('http://127.0.0.1/apiapp/insert.php', userData).subscribe( (r) => {
            // .next is how you send data via a subject
            this.message.next(r.message);
        });
    }
    
    
    
    
    result = '';
    private resultSubscription: Subscription;
    
    ngOnInit() {
        // Get subject as observable
        this.resultSubscription = this.userS.message.asObservable().subscribe( (r) => {
            this.result = r;
            // by logging here we can ensure that the result will be populated
            console.log(this.result);  
        });
    }
    
    addPost(userData: {username: string, email: string, password: string, school: string}) {
        this.userS.addUser(userData);
    }
    
    // It is important to unsubscribe for your observable when the component is destroyed
    ngOnDestroy(): void { this.resultSubscription.unsubscribe(); }
    
...