我正在遵循一个教程,其中我们填充了一个选择列表。
老师使用的是Angular4,而我使用的是最新版本,所以我认为应用编程接口发生了变化。
我尝试在一个名为CategoryService的类中使用此方法:
getCategories() {return this.db.list('/categories');}
在我的构造函数中的另一个名为ProductFormComponent的类中,我试图返回一个可以在HTML中捕获的可观察对象
categories$;
constructor (
private router: Router,
private categoryService: CategoryService,
private productService: ProductService) {
this.categories$ = categoryService.getCategories();
}
我的HTML如下所示:
<div class="form-group">
<label for="category">Category</label>
<select #category="ngModel" ngModel name="category" id="category" class="form-control" required>
<option value=""></option>
<option *ngFor="let c of categories$ | async" [value]="c.$key">
{{ c.name }}
</option>
</select>
<div class="alert alert-danger" *ngIf="category.touched && category.invalid">
Category is required.
</div>
</div>
这会产生错误
错误: InvalidPipeArgument:管道'AsyncPipe‘的'object Object’
我做错了什么?有什么方法可以解决这个问题?
发布于 2019-06-06 07:51:35
我相信你的问题是,你遵循的是一个旧的教程,使用的是旧版本的firebase连接器。
在版本5上有一些需要的更改。
在您的服务中,您需要这样做
getCategories() {return this.db.list('/categories')
.snapshotChanges()
.pipe(
map(categories => categories.map(category => ( { key: category.key, ...category.payload.val() } )))
);}
如果您希望以后能够使用key
(也应该在对象中定义)
如果你不需要这个,你可以在你的服务中使用以下选项:
getCategories() {return this.db.list('/categories').valueChanges()}
这些选项是firebase API 5.0中用于返回观察值的新格式。它不再像以前的4.0版本那样默认返回
有关这方面的更多详细信息,以及哪个版本更适合您,请查看更改的documentation
发布于 2019-06-06 06:05:57
如果this.db.list()
没有返回Observable
,您可以使用以下方法:
import { of } from 'rxjs';
class CategoryService {
getCategories() {
return of(this.db.list('/categories'));
}
}
这将把您的数据包装在一个可观察的对象中。
但是如果操作是完全同步的,那么就没有理由使用Observable。
发布于 2019-06-06 06:06:17
看起来下面的方法没有返回一个可观察的-
getCategories() {return this.db.list('/categories');}
我认为"this.db.list('/categories');“返回一个简单的数组。要确保getCategories()返回一个可观察对象,请执行以下操作:
getCategories() {
const values = this.db.list('/categories');
return of(values);
}
"of“是rxjs运算符。从"rxjs“导入。请注意,我假设this.db.list('/categories');返回的是简单数组。理想情况下,您可以使用HTTP客户端来调用您的后端,后者返回包装在可观察对象中的数据。
https://stackoverflow.com/questions/56468575
复制相似问题