根据 Angular 5 的键检索 Firebase 数据库的特定值

Question

正如标题所说，我使用 Angular 5 构建了一个 CRUD 应用程序，CRUD 工作得很好，但现在我需要使用高级路由检索特定的帖子数据，所以 url 应该是这样的： https://example.com/blog/howtoDoSomething 该页面应包含此帖子的详细信息，例如名称、内容、图像等。

我试过了

details.component.ts

this.sub = this.route.params.subscribe(params => {
    this.key = params['$key']; 
});

details.component.html

<p>
 this page about {{ $key }}
</p>

上面的代码在 angular 4 上运行良好，当然有一些不同，我使用的是 json 文件而不是 Firebase。

---

我也试过这个：

details.component.ts

var x = this.blogService.getData();
        x.snapshotChanges().subscribe(item => {
        this.blogList = [];
        item.forEach(element => {
        var y = element.payload.toJSON();
        y["$key"] = element.key;
        this.blogList.push(y as Blog);
    });
});

details.component.html

<div *ngFor="let blog of blogList">
    {{blog[$key].title}}
</div>

如果我单独使用博客的话，这个：

<div *ngFor="let blog of blogList">
    {{blog}}
</div>

这将检索整个数据库作为 [object object]重复

提前致谢。

Answer 1

// user-service.ts
public getUser(userId: string) {
    return this.afs.doc('users/' + userId).valueChanges();
)

// user-component.ts
// Get userId from route
this.user$ = this.userService.getUser(userId);

// user-component.html
<div *ngIf="user$ | async as user">
    {{user | json}}
</div>