Question

我正在关注一个教程，其中将填充选择列表。

老师正在使用Angular4，而我正在使用最新版本，因此我认为API已更改。

我正在尝试在名为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”的“ [对象对象]”

我在做什么错了，什么可以解决？

Answer 1

如果this.db.list()未返回Observable，则可以使用以下内容：

import { of } from 'rxjs';

class CategoryService {

    getCategories() {
        return of(this.db.list('/categories'));
    }

}

这会将您的数据包装在可观察的范围内。

但是，如果操作是完全同步的，则没有理由使用Observable。

Answer 2

类似以下方法未返回可观察到的结果-

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客户端调用后端，该后端返回包装在可观察对象中的数据。

Answer 3

我相信您的问题是，您遵循的是使用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上的更改

如何在Angular中返回可观察对象？

3 个答案: