如何在Angular中返回一个可观察对象？
我正在遵循一个教程，其中我们填充了一个选择列表。
老师使用的是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’
我做错了什么?有什么方法可以解决这个问题？
回答 3
Stack Overflow用户
发布于 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
Stack Overflow用户
发布于 2019-06-06 06:05:57
如果this.db.list()没有返回Observable，您可以使用以下方法：
import { of } from 'rxjs';
class CategoryService {
getCategories() {
return of(this.db.list('/categories'));
}
}这将把您的数据包装在一个可观察的对象中。
但是如果操作是完全同步的，那么就没有理由使用Observable。
Stack Overflow用户
发布于 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
复制相似问题