Проблема при получении данных в Angular из части BackEnd

Question

Надеюсь, у вас все хорошо, я столкнулся с небольшой проблемой, когда хотел разработать приложение для Angular, и мне хотелось именно вернуть список элементов «Меню» моей серверной части, чтобы использовать его в моем приложении.

Проблема в том, что когда я использую метод get, чтобы вернуть данные, эти данные возвращаются в конец выполнения, я заметил эту деталь, когда хотел зарегистрировать объекты, которые я привел из backEndв консоли.

Как вы можете видеть, когда я регистрирую объект MenuItem в конструкторе или в методе Onint (), я получаю пустой объектно когда я регистрирую этот объект в классе обслуживания, я получаю объект menuTtem, поэтому я понимаю, что OnInit и Construtor выполняются первыми и следуют за методом http, а вторыми.

У меня такой вопрос: есть лиспособ восстановить данные, не попадая в эту проблему?

вот мой конструктор в menu.component:

constructor(public appSettings: AppSettings, public menuService: MenuService) {
  this.settings = this.appSettings.settings;
  this.menuItems = this.menuService.getVerticalMenuItems();
  console.warn('this.menuItems in the construtor', this.menuItems)

}

и getMeМетод nuItems () моей службы Menu.service

public getMenuItems(): Menu[] {
  this.http.get<Menu[]>(this.url + 'all').subscribe(
      data => { this.menudata = data
        console.warn('this.menudata in Service', this.menudata)
    }
  )
  return this.menudata ;

} ​​

Если есть какие-либо предложения, не стесняйтесь.

Спасибо!

Answer 1

попробуйте это: подпишитесь на вызов API в вашем ngOnInit (), а не на компонент служб

 ngOnInit() {
      this.settings = this.appSettings.settings;
      this.menuService.getMenuItems().subscribe(
      (data: any) => {  
        console.warn('this.menuItems in Service', data )
    }
  );

  } 

в компоненте служб, сделайте это.Не забудьте перезвонить на сервисный звонок

 public getMenuItems() {
 return this.http.get<Menu[]>(this.url + 'all')
}

Answer 2

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

обратите внимание, что при вызове метода getMenuItems () в Menu.service онвозвращает данные, которые назначены свойству menudata в это конкретное время, которое является нулевым в случае первого вызова метода.

, что происходит, потому что наблюдаемое получает со временем "есть задержка" илидругими словами, это асинхронная операция

 public getMenuItems(): Observable<Menu[]> {
  return this.http.get<Menu[]>(this.url + 'all');
  }

и внутри вас компонент

ngOnInit () {
this.menuService.getVerticalMenuItems().subscribe((data) => {
   this.data = data;
});

}

Answer 3

Ну, мне кажется, код работает так, как должен.Вам просто нужно понять асинхронную природу JS.Вы не можете заблокировать основной поток JS по своей природе медленным сетевым взаимодействием (обратный обход HTTP-запроса-ответа может занять 200 мс).

В этом случае функция get возвращает Observable, на котором вы можете subscribe к новым событиям.И это все.В этом случае событие является ответом HTTP.Когда приходит HTTP-ответ, он присваивает data this.menudata и регистрирует служебное сообщение.

Итак, вы subscribe немедленно Observable, но сама подписка обрабатывается, когда приходит HTTP-ответ,Он не может дождаться ответа, а затем продолжить.Это убило бы отзывчивость приложения.

// Для получения дополнительной информации о концепции используйте соответствующую часть официального Углового руководства .

Answer 4

вызовите ваши методы в ngOnInit(), а не в конструкторе.Когда вызывается метод getVerticalMenuItems(), поток не ожидает ответа, поэтому параметр возвращает undefined.Вот почему вы получаете неопределенное значение.

внесите некоторые изменения, как показано ниже,

  ngOnInit() {
      this.settings = this.appSettings.settings;
      this.menuService.getVerticalMenuItems();
      console.warn('this.menuItems in the construtor', this.menuItems)
  } 



 public getMenuItems() {
  this.http.get<Menu[]>(this.url + 'all').subscribe(
      (data: any) => { 
        this.menuItems = data
        console.warn('this.menuItems in Service', this.menuItems )
    }
  )
}

Лучше подписаться на свой Наблюдаемый ответ в Компоненте.