如何仅显示点击提要的评论答案

【问题标题】：How can I show comments of clicked feed only如何仅显示点击提要的评论
【发布时间】：2019-01-13 12:42:33
【问题描述】：

我被困在一个嵌套循环中。遍历Feeds 数组的顶部循环和Feeds 中的每个feed 都有cmets 数组。这个 cmets 用于内部循环。

我的问题是，我有 评论按钮，点击该按钮后，我只想显示该提要帖子的 cmets 列表。但不是在当前提要帖子上显示 cmets，而是为所有其他提要显示 cmets，这是因为仅使用了在 .ts 文件中创建的一个 Boolean 变量 showComments。

那么如何才能使它仅适用于给定的上下文Feed post？

HTML

<ng-container *ngFor="let feed of feeds">
  <div class="ed-card ed-card-feed">
    <div class="ed-card-feed--footer">
      <div class="card-feed-values">
        <a class="mr-4"><span>{{feed.likes_count}}</span> Likes</a>
        <a><span>{{feed.comments_count}}</span> Comments</a>
      </div>
      <div class="card-feed-actions">
        <a class="mr-5" (click)="likePost(feed.id)"><span></span> Like</a>
       <a href="javascript:void(0)" class="mr-5" (click)="showComments = true"><span></span> Comment button</a>
      </div>
    </div>
    // Below  div needs to be open for that particular feed only
    <div *ngIf="showComments" class="ed-card-feed--comments">
      <div class="feed-comments-list">
        <ng-container *ngFor="let comment of feed.comments?.edges">
          <div class="comment-list-item">
            <p class="comment-box mt-1">
              {{comment.node?.body}}
            </p>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</ng-container>

附： - 请不要与feed.comments?.edges 混淆，这只是因为GraphQL。它只是一个数组。

感谢

【问题讨论】：

标签： javascript html angular graphql

【解决方案1】：

您可以维护一个showComments[] 的数组，其大小等于feeds 的大小，初始设置为false。 showComments[false,false...]

<ng-container *ngFor="let feed of feeds; let myIndex = index"">
 //code here
<a href="javascript:void(0)" class="mr-5" (click)="showComments[myindex] = true"><span></span> Comment button</a>

//检查是否为真

<div *ngIf="showComments[myindex] === true" class="ed-card-feed--comments">
</ng-container>

【讨论】：

【解决方案2】：

你可以定义一个selectedFeeds数组来代替布尔值：

selectedFeeds = new Array<Feed>();

在模板中，将已点击的提要添加到selectedFeeds：

<a href="javascript:void(0)" class="mr-5" (click)="selectedFeeds.push(feed)>Comment button</a>

然后您根据选定的提要过滤 cmets：

<div *ngIf="selectedFeeds.indexOf(feed) >= 0" class="ed-card-feed--comments">

【讨论】：

它会起作用，但每次提要更改之前的提要评论框都会关闭
问题提到您希望看到“仅用于该提要帖子”的 cmets。我修改了答案以允许选择多个提要。
推入 selectedFeeds 也是一个好方法。如果提要对象很大，可能会占用空间。
@Helpinghand - 不是真的。它只向数组添加一个 Feed 指针，而不是 Feed 内容。

【解决方案3】：

实现这一点的最佳方法是将代码分成不同的组件。并且由于每个组件都有自己的 cmets 实例 - 创建局部变量并在其中显示/显示 cmets 不会有问题。

我创建了一个如何实现它的示例：stackblitz

【讨论】：

【解决方案4】：

另一种方法

<ng-container *ngFor="let feed of feeds">
    <a href="javascript:void(0)" (click)="toggleComments(feed)">Comment button</a>
    <div *ngIf="feed.showComments" class="ed-card-feed--comments">
</ng-container>

js文件

toggleComments(feed) {
   feed.showComments = true // (feed.showComments = !feed.showComments => to show or hide (toggle))
}

【讨论】：