Arrays 角度渲染过滤阵列问题

我正在学习本教程，我被困在这个特性中，当单击锚定时，我必须显示一个过滤数组（来自firebase的对象）。我遵循了所有的实现步骤，但我遗漏了一些东西……代码：

HTML:

该服务可以正确地检索数据，但当我记录过滤后的数组时，我什么也得不到……有人能帮我一下吗

编辑：

---

您试图在检索产品之前设置阵列。subscribe是一个异步操作，因此它不会按照启动的顺序执行，而是按照结果到达的顺序执行，queryParams是一种立即发出的可观察的类型，因此subscribe是在产品到达之前执行的，相反，请使用observable CombineTest和map操作符以及异步管道：

filteredProducts$: Observable<Product[]>;

....

const category$ = this.route.queryParamMap.pipe(map(params => params.get('category')));
this.filteredProducts$ = combineLatest(this.productService.getAll(), // combine the streams
                                       category$)
                           .pipe(
                             tap(([products, category])=> console.log(products, category)), // this is how you log in a stream
                             map(([products, category]) => // you'll have the latest value from both
                               (category) ? // run your filter
                                 products.filter(p => p.category.toLowerCase() === category.toLowerCase()) :
                                 products),
                             tap(filteredProducts => console.log(filteredProducts)) // this is how you log in a stream
                           );

filteredProducts$：可观察；
....
const category$=this.route.queryParamMap.pipe（map（params=>params.get（'category'））；
this.filteredProducts$=CombineTest（this.productService.getAll（），//组合流
类别$）
.烟斗(
轻触（（[products，category]）=>console.log（products，category）），//这是您登录流的方式
map（（[products，category]）=>//您将获得这两个方面的最新值
（类别）？//运行您的筛选器
products.filter（p=>p.category.toLowerCase（）===category.toLowerCase（））：
产品），
点击（filteredProducts=>console.log（filteredProducts））//这是您登录流的方式
);

然后在模板中使用异步管道，就像使用类别一样$

<ng-container *ngFor="let p of filteredProducts$ | async; let i =index">

---

可观察的只是如何处理数据流的定义。记录该流之外的内容不会显示该流内部的值。

tap

操作符允许您记录流中的内容

您应该嵌套订阅，它们都是异步调用。如果您点击“this.route.queryParamMap…”，则无法保证前面的getAll（）方法已完成。很可能发生了什么。您正在尝试筛选空的array@sinanspd你永远不应该嵌套订阅我理解你的逻辑，但输出是一样的，我甚至不能读取控制台中的参数，它保持未定义..这取决于你在哪里记录。。。。它是一个流定义，直到它被执行，为您添加了一个日志行，您提供的代码日志显示了一个空的筛选器数组…我不明白这一点，因为即使确保对象比读取参数先，过滤器arry仍然是空的，查看您的编辑。。。看起来“类别”都是小写，但产品上的类别字段的第一个字母是大写。。。。这不会产生精确的匹配

filteredProducts$: Observable<Product[]>;

....

const category$ = this.route.queryParamMap.pipe(map(params => params.get('category')));
this.filteredProducts$ = combineLatest(this.productService.getAll(), // combine the streams
                                       category$)
                           .pipe(
                             tap(([products, category])=> console.log(products, category)), // this is how you log in a stream
                             map(([products, category]) => // you'll have the latest value from both
                               (category) ? // run your filter
                                 products.filter(p => p.category.toLowerCase() === category.toLowerCase()) :
                                 products),
                             tap(filteredProducts => console.log(filteredProducts)) // this is how you log in a stream
                           );

<ng-container *ngFor="let p of filteredProducts$ | async; let i =index">