Моя angular функция не выполняется при первом вызове. Выполняется только во втором звонке - PullRequest
Новая
       54

Моя angular функция не выполняется при первом вызове. Выполняется только во втором звонке

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

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

        this.service.myMethod(this.ville);
        this.router.navigateByUrl('tabs/resto-by-ville');

Позже я получаю свои данные и использую их следующим образом: 

getDataByVille() {
    this.service.myMethod$.subscribe((city) => {
        this.city = city;
        this.http.get<Etablissement[]>('http://127.0.0.1:8000/api/etablissements/' + this.city).subscribe((data) => {
            this.dataByVille = data;
            console.log(this.dataByVille);
        });
    });
}

ngOnInit() {
    this.getDataByVille();
}

Моя служба : 

export class GetDataByVilleService {
    myMethod$: Observable<string>;
    private myMethodSubject = new Subject<string>();

    constructor() {
        this.myMethod$ = this.myMethodSubject.asObservable();
    }

    myMethod(data) {
        console.log(data);
        this.myMethodSubject.next(data);
    }

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

Ответы [ 2 ]

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

Проблема в том, что Субъект не сохраняет значение, поэтому к тому времени, когда вы достигнете страницы 'tabs / resto-by-ville', выброс уже произошел.

Вместо Субъекта, Вы должны использовать BehaviorSubject, например:

private myMethodSubject = new BehaviorSubject <string>(null);

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

0 голосов
/ 29 января 2020

Вы получаете наблюдаемый паттерн совершенно неправильно. Они должны быть связаны следующим образом:

Сервис: 

export class GetDataByVilleService {
  getDataByVille(): Observable<Etablissement[]> {
    return this.http.get<Etablissement[]>('http://127.0.0.1:8000/api/etablissements/' + this.city)
  });
}

Компонент: 

// Component under "tabs/resto-by-ville"
export class RestoByVilleComponent {
  dataByVille: Etablissement[];

  constructor(getDataByVilleService: GetDataByVilleService )
  ngOnInit() {
    this.getDataByVilleService.getDataByVille().subscribe(dataByVille => {
      this.dataByVille = dataByVille;
    });
  }
}

Нет необходимости вызывать сервис из компонента, по которому вы хотите перемещаться от.

...