Попытка получить определенные части данных внутри распознавателя маршрута Angular

Question

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

Вот моя служба распознавания:

@Injectable()
export class FoodResolver implements Resolve<any> {
    constructor(private foodService: FoodService) {}

    resolve(route: ActivatedRouteSnapshot) {
        this.foodService.getFood().subscribe((data) => {
            return data.find((food) => {
                return food.name == route.params["name"];
            })
        })
    }
}

getFood делает простойзвоните: return this.http.get<Array<FoodModel>>("/api/foods") и я использую InMemoryWebApi для проверки базы данных.

В моем компоненте я получаю данные в ngOnInit:

    ngOnInit(): void {
        this.food = this.route.snapshot.data["food"];
    }

Если кто-то может указать мне, где яидти не так, как следуетЯ добавил консольные журналы повсюду. Порядок:

ngOnInit: food = undefined.

Ошибка рендеринга HTML: невозможно прочитать имя свойства undefined.

Resolver: регистрирует правильный список продуктов и нужный элемент, который я хочунайти.

Ошибка рендеринга HTML: невозможно прочитать имя свойства undefined.

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

resolve(route: ActivatedRouteSnapshot) {
    const observable = new Observable((observer) => {
        observer.next(
            this.foodService.getFood().subscribe((data) => {
                return data.find((food) => {
                    return food.name == route.params["name"];
                })
            })
         );
         observer.complete();
       })
       return observable;
    }

При этом все ошибки исчезли, но информация не отображается. В нгОнинит еду подписчик. И теперь у меня нет идей. Если бы кто-то мог мне помочь, это было бы очень признательно. Спасибо.

Sidenote: Я бы предпочел не фильтровать список внутри самого компонента для возможности повторного использования, если это возможно. Кроме того, у меня нет данных с идентификаторами, поэтому я не могу вызвать http.get ("/ food / lasagna"), например

Answer 1

Подпись resolve предлагает вернуть Observable<T> / Promise<T>. Вы ничего не возвращаете.

Попробуйте:

import { map } from 'rxjs/operators';
...

@Injectable()
export class FoodResolver implements Resolve < any > {
  constructor(private foodService: FoodService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return this.foodService.getFood().pipe(
      map(
        data => data.find(food => food.name == route.params["name"])
      )
    )
  }
}