Question

我正在制作电影应用以练习我的MEAN堆叠技巧。

所以我有以下带有标题组件的网页（见下文）。此组件显示的数据包括网站拥有的用户数量，电影数量等。该标题位于应用程序的每个页面上。

现在，想象一下新人注册的情况。我希望此组件立即为用户计数添加1，以便在视图中显示另外一个用户而无需刷新页面。

我认为在我的模板中切换到异步管道之后会出现这种情况，但遗憾的是并非如此。有谁知道如何实际做到这一点？屏幕截图和代码如下。

在顶部，您会看到标头组件，目前它有5个用户。当有人使用新的注册表时，我希望它立即更新，而不是仅仅在我重置页面时。

模板

<ul class="stats">
            <li>{{ (websiteStats$ | async).movieCount }} movies |</li>
            <li>{{ (websiteStats$ | async).userCount }} users |</li>
            <li>{{ (websiteStats$ | async).ratingCount }} movie ratings |</li>
            <li>{{ (websiteStats$ | async).reviewCount }} movie reviews</li>
        </ul>

标题组件

ngOnInit(){
        this.websiteStats$ = this.movieService.countData()
        console.log(this.websiteStats$)
    }

后端node.js路由获取所有数据

router.get('/getCounts', function(req, res, next) {
  console.log('entered back-end');
  var votes;
  var reviews;
  Movie.find({}, function(err, movies){
      if (err) {
          return res.status(500).json({
              title: 'An error occurred',
              error: err
          });
      }
      var amountOfMovies = movies.length;
    User.find({}, function(err, users){
        if (err) {
            return res.status(500).json({
                title: 'An error occurred',
                error: err
            });
        }
        var amountOfUsers = users.length;
        var amountOfRatings = 0;
        var amountOfReviews = 0;
        users.forEach(function(user){
            amountOfRatings += user.ratings.length;
            amountOfReviews += user.reviews.length;
        });

        res.status(200).json({
              userCount: amountOfUsers,
                movieCount: amountOfMovies,
                ratingCount: amountOfRatings,
                reviewCount: amountOfReviews
        });
    })
  })
});

添加：服务代码

countData(){
    return this.http.get('http://localhost:3200/app/getCounts')
        .map((response: Response) => {
            const result = response.json();
            return result
        })
        .catch((error: Response) => {
            return Observable.throw(error.json());
        })
}

在Angular / node.js app

0 个答案: