Angular 尝试获取路由解析程序内部的特定数据部分

当路由到集合中的特定项时，我尝试使用解析程序将数据附加到路由。我将数据本地存储在一个服务中，并使用该服务上的一个方法来查找名称与我正在搜索的route param匹配的项目。这工作得很好，但后来我改为尝试调用数据库获取信息。现在，我无法确定如何在解析器服务中对所需特定项的返回数据进行排序

这是我的解析器服务：

@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"];
            })
        })
    }
}

如果有人能告诉我哪里出了问题，我将不胜感激。我在整个过程中添加了控制台日志。命令：

ngOnInit:food=未定义

Html呈现错误：无法读取未定义的属性名

食物分解器：记录正确的食物清单和我想找到的正确物品

Html呈现错误：无法读取未定义的属性名

当我只返回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;
    }

执行此操作时，所有错误都消失了，但没有显示任何信息。在恩戈尼特，食品是订户。现在我没有主意了。如果有人能帮助我，我将不胜感激。多谢各位

旁注：如果可能的话，出于可重用性的考虑，我不希望在组件内部过滤列表。此外，我的数据中没有id，因此无法调用http.get（“/food/lasagna”），例如签名建议返回可观察的

/
承诺。你什么也不退

试试这个：

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"])
      )
    )
  }
}

从'rxjs/operators'导入{map}；
...
@可注射（）
导出类FoodResolver实现解析{
构造函数（私有foodService:foodService）{}
解析（路由：ActivatedRouteSnapshot）{
返回此.foodService.getFood（）管道(
地图(
data=>data.find（food=>food.name==route.params[“name”]）
)
)
}
}

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"])
      )
    )
  }
}