Question

我建立了一个网站，即一个在本地运行的博客，其中包含完整的MEAN（MongoDB，Node，Angular和Express）堆栈。我已经实现了后端，但前端存在一些问题。大多数都有效。我动态加载内容，即每次用户到达页面底部时，我会加载接下来的三篇博文。我还添加了一些投票（上下）。我不知道我是否做得对，但它确实有效。我有一个包含所有博客帖子的数组。每次用户到达底部时，我都会通过.push将它们添加到我的数组中。此数组通过* ngFor显示，因此它包含所有当前的博文和＆＃34;将来的帖子＆＃34;。问题出现了我如何以有效的方式加入投票？每次用户点击＆＃34;投票＆＃34;我都添加了一个数组。我检查帖子ID是否已经在该数组中，如果不是，我添加它并将投票增加1，并通过请求将值也存储在数据库中。如果用户后悔他的决定，他可以随时按下相同的按钮以恢复初始状态，因为现在帖子ID在该数组中，因此点击同一按钮不再是投票，而是减少投票并删除数组中的post id（并将新值存储在数据库中）。用户现在可以再次投票，因为帖子ID不再在该数组中等等。

有没有更好的方法来实施投票？我认为如果用户加载1000篇博客文章并投票许多文章，然后后悔一篇，那么加载时间最终可能非常高（在大数组中找到一个值，等等）。

我在这里写的内容如下。主要问题是我想在每篇博文中添加一个评论框。但是我该怎么做？我应该在每次浏览器加载3条第3条评论框时创建吗？＆＃34;这＆＃34;这不是一个真正的问题，但是在已经提到的相同场景中发生了什么？如果用户一个接一个地阅读20篇文章会发生什么。然后创建20个评论框并绑定到某些变量等。它不能以这种方式有效。我想我可以创建一个评论框，每次用户点击一个锚标记（名为＆＃34;回复＆＃34;）时，评论框将被打开。但只有一个盒子。它将在适当的地方显示。但我不知道如何用角度来实现这一点。：（

我很感激任何提示或帮助。：）

更新26.11.2017：我与我的项目分享了一些内容，所以可以更好地理解我的意思。

这是我的blog.component.ts

import { Component, OnInit } from '@angular/core';

import { CarouselConfig } from 'ngx-bootstrap/carousel';

import { BlogPost } from '../shared/blogPost';
import { BlogPostFactory } from '../shared/blogPost-factory';

import { DataService } from '../data.service';

@Component({
  selector: 'ca-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css'],
  providers: [{provide: CarouselConfig, useValue: {interval: 1500, noPause: true}}]
})
export class BlogComponent implements OnInit {
  private blogPosts: BlogPost[] = [];
  private heartsUp: string[] = [];
  private likesUp: string[] = [];

  constructor(private dataService: DataService) {
    window.onscroll = () => {
      let windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
      let body = document.body;
      let html = document.documentElement;
      let docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
      let windowBottom = windowHeight + window.pageYOffset;

      if(windowBottom >= docHeight) {
        let urlSearchParams = { last: this.blogPosts.length };

        this.dataService.getBlogPosts(urlSearchParams).subscribe( result => {
          for(let i=0; i<result.length; i++){
            this.blogPosts.push(BlogPostFactory.fromObject(result[i]));
          }
        });
      }
    };
  }

  ngOnInit() {
    this.dataService.getBlogPosts().subscribe( result => {
      for(let i=0; i<result.length; i++){
        this.blogPosts.push(BlogPostFactory.fromObject(result[i]));
      }
    });
  }

  incrementHearts(index) : void {
    let idIndex : number = this.heartsUp.indexOf(this.blogPosts[index].id);

    if(idIndex != -1){
      this.blogPosts[index].hearts--;

      this.heartsUp.splice(idIndex, 1);

    } else {
      this.blogPosts[index].hearts++;

      this.heartsUp.push(this.blogPosts[index].id);
    }

    this.dataService.editBlogPost(this.blogPosts[index].id, { hearts: this.blogPosts[index].hearts }).subscribe().unsubscribe();
  }

  incrementLikes(index) : void {
    let idIndex : number = this.likesUp.indexOf(this.blogPosts[index].id);

    if(idIndex != -1){
      this.blogPosts[index].likes--;

      this.likesUp.splice(idIndex, 1);

    } else {
      this.blogPosts[index].likes++;

      this.likesUp.push(this.blogPosts[index].id);
    }

    this.dataService.editBlogPost(this.blogPosts[index].id, { likes: this.blogPosts[index].likes }).subscribe().unsubscribe();
  }
}

和blog.component.html由

提供

<div class="container">
  <div *ngFor="let blogPost of blogPosts; let i=index">
    <div *ngIf="i !== 0">
      <hr class="my-5">
    </div>
    <div class="row">
      <div class="col">
        <article>
          <section>
            <header style="" class="mb-4">
              <h1 style="display:inline" class="m-0 p-0">{{ blogPost.title }}</h1><small style="opacity:0.5" class="d-block d-sm-inline ml-sm-3">zuletzt bearbeitet am {{ blogPost.lastEdited | date }} von <a href="#" style="color:black"><strong>{{ blogPost.author.username }}</strong></a></small>
              <p class="mt-1 mt-sm-auto"><i class="fa fa-tags mr-2"></i><a *ngFor="let hashtag of blogPost.hashtags" href="#" class="badge badge-secondary mr-2">#{{ hashtag }}</a></p>
            </header>

            <div class="m-0 p-0" [innerHTML]="blogPost.body">
            </div>
            <div>
              <small class="heartUp"><a (click)="incrementHearts(i)" [ngStyle]="{'color':heartsUp.includes(blogPost.id) ? '#E63946' : 'rgba(0,0,0,0.5)'}"><i class="fa fa-heart mr-1"></i>{{ blogPost.hearts }}</a></small>
              <small class="likeUp"><a (click)="incrementLikes(i)" [ngStyle]="{'color':likesUp.includes(blogPost.id) ? '#3b5998' : 'rgba(0,0,0,0.5)'}"><i class="fa fa-thumbs-up mr-1"></i>{{ blogPost.likes }}</a></small>
              <small class="reply"><a><i class="fa fa-mail-reply mr-1"></i>Reply</a></small>
            </div>
          </section>
        </article>
      </div>
    </div>
  </div>
</div>

我希望这可以更好地形象化我的问题。

Answer 1

对于你的第一个问题，这取决于你如何看待它，你想禁用投票？如果是，那么你需要在前端对待它，如果没有，你可以让用户按下投票然后在服务器中检查用户ID并发回错误信息（“你已投票”），对于你的第二个问题我不太清楚你的意思只有一盒？你的意思是你有一个盒子组件？如果这让你感到困惑，只需将组件视为可以在对象中实例化的类，对于可以创建大量组件的组也是如此，因为非常一个是不同的实例。

在* ngFor循环

1 个答案: