在 *ngfor循环中创建元素(评论框)

Question

我已经构建了一个网站，即目前在本地运行的博客，该博客以均值（mongodb，node，node，angular and express）堆栈在本地运行。我已经实施了后端，但是前端有一些问题。大部分都起作用。我动态加载内容，即每次用户到达页面底部时，我都会加载下三个博客文章。我还添加了一些投票（上下）。我不知道我是否做对了，但是它有效。我有一个包含所有博客文章的数组。每次用户到达底部时，我都会通过.push将它们添加到我的数组中。该数组通过 *ngfor显示，因此它包含当前的所有博客文章和"未来帖子"。问题出现了我如何以有效的方式添加投票？我添加了一个数组，每次用户单击"投票"时，我都会检查发布ID是否已经在该数组中，如果不是，我会添加它，并通过请求将其添加到数据库中，并将其存储在数据库中。如果用户对他的决定感到后悔，他可以随时按相同的按钮将初始状态恢复回去，因为现在帖子ID在该数组中，因此单击同一按钮不再进行投票，而是我们减少投票并删除投票数组中的帖子ID（并将新值存储在数据库中）。现在，用户可以再次投票，因为该数组中的发布ID不再是

。

是否有更好的方法来实施投票？我认为，如果用户加载了1000篇博客文章并投票了许多文章，然后对一篇文章感到遗憾，那么加载时间最终会很高（在大型数组中找到一个价值等）。

为什么我在这里写的是以下内容。主要问题是我想在每个博客文章中添加一个评论框。但是我该怎么办？我应该每次浏览器加载3条第3条评论框时创建吗？"这个"并不是真正的问题，但是与已经提到的相同情况下发生了什么？如果用户又一次阅读20篇文章，发生了什么。然后创建了20个评论框，并将其与某些变量相结合。它不能以这种方式有效。我认为我可以创建一个评论框，并且每当用户单击锚标签（命名为"回复"）时，评论框都会被打开。但是只有一个盒子。它将在适当的位置显示。但是我不知道如何用角度实施它。：（

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

更新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并将错误消息发送回（"您已经投票"），对于您的第二个问题，我不太了解您的意思，只有1个盒子？您的意思是您有1个组件吗？如果那会使您感到困惑，只需将组件视为可以在对象中实例化的类，对于组件，您可以创建很多，因为一个是一个不同的实例。