javascript - 如何在组件中显示 Observables？

Question

我在组件中有以下代码:

ngOnInit(): void
    {
        const source = this.categoryService.getCategories();
        const sourceedit = source.subscribe(aff => console.log(aff));
        const example = source.map((categor) => categor.map((categories) => {
        const links = this.categoryService.countCategoryLinks(categories.id)
                    .subscribe(valeur => console.log(valeur));
            return categories.id
        }));
        const categories = example.subscribe(val => console.log("valeur: "+val));
     }

控制台中显示以下结果:

在我的 .ts 模板文件中，我有以下内容:

<tr *ngFor="let category of categories | async; let id = index">
        <td>
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[3]">
            <input type="checkbox" id="row[3]" class="mdl-checkbox__input"/>
            </label>
        </td>
        <td class="mdl-data-table__cell--non-numeric"><a [routerLink]="['/category/links']"></a>{{category.categoryName }}
        </td>
        <td class="mdl-data-table__cell--non-numeric">{{category.categoryName}}
        </td>
        <td #category.id><i (click)="deleteCategory(id)" class="material-icons">delete</i>
        </td>
</tr>

什么也没显示。我想在表格中显示类别以及计数结果。

提前致谢并致以最诚挚的问候

Answer 1

从提供的代码来看，您似乎没有设置 this.categories等于 subscribe() 内服务器/服务的响应声明。

您需要执行以下操作来确保您的 *ngFor="let category of categories可以显示类别集合数据，假设方法 getCategories()返回 Observable<Category[]>或映射到 JSON 的类似可观察集合:

服务:

getCategories(): Observable<Category[]> {
    return this.http.get(this.categoriesUrl)
        .map((res: Response) => res.json() as Category[])
        .catch(err => console.log(err));
}

组件:

this.categoryService.getCategories().subscribe(categories => this.categories = categories);

计数也是如此。您需要确保设置的类变量或类似变量等于每个类别的计数。

TS:

getCount(categoryId: number): {
    this.categoryService.countCategoryLinks(categories.id).subscribe(valeur => this.categories[categories.id].valeur = valeur);
}

HTML:

<td>Count: {{getCount(category.id)}}</td>