Javascript 如何在组件中显示可观测值？

我在组件中有以下代码：

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>

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

---

提前感谢，并从提供的代码中向您致以最诚挚的问候。您似乎没有将此设置为。类别等于订阅语句中服务器/服务的响应

假设getCategories方法返回映射到JSON的可观察或类似可观察集合，则需要执行如下操作，以确保您的*ngFor=let categories类别可以显示categories集合数据：

服务：

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

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

TS:

HTML:

以下是问题的解决方案：

ngOnInit(): void
{
    this.categories = this.categoryService.getCategories();
    const example = this.categories
        .mergeMap((categor) => categor
            .map((myCateg) => {
        this.categoryService.countCategoryLinks(myCateg.id)
            .map(numlinks => {
                myCateg.numlinks = numlinks.count;
                return myCateg;
            })
                //Object.assign(myCateg,{numLinks: numlinks}))
            .subscribe(value => console.log(value));
        return myCateg
    }));

            example.subscribe(val => console.log("value2: "+val));

}

---

您好，对于编写this.categories=this.categoryService.getCategories的类别；够了。谢谢

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

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

ngOnInit(): void
{
    this.categories = this.categoryService.getCategories();
    const example = this.categories
        .mergeMap((categor) => categor
            .map((myCateg) => {
        this.categoryService.countCategoryLinks(myCateg.id)
            .map(numlinks => {
                myCateg.numlinks = numlinks.count;
                return myCateg;
            })
                //Object.assign(myCateg,{numLinks: numlinks}))
            .subscribe(value => console.log(value));
        return myCateg
    }));

            example.subscribe(val => console.log("value2: "+val));

}