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>

上面的代码在角度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>

根据具有角度5

1 个答案: