Question

我被困在一个嵌套循环中。遍历Feeds数组的顶部循环，feed中的每个Feeds都有 comments 数组。此注释用于内部循环。

我的问题是，我有评论按钮，点击该按钮后，我只想显示该供稿帖子的评论列表。但是，由于未使用在Boolean文件中创建的一个showComments变量.ts，因此未在当前供稿帖子上显示评论，而是在显示所有其他供稿的评论。

那么如何才能使其仅在给定的上下文中起作用？帖子？

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>

P.S。 -请不要仅仅因为feed.comments?.edges而与GraphQL混淆。这只是一个数组。

感谢

Answer 1

您可以定义一个selectedFeeds数组，而不是布尔值：

selectedFeeds = new Array<Feed>();

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

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

，然后根据所选的供稿过滤评论：

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

Answer 2

您可以维护一个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>

Answer 3

实现此目标的最佳方法是将代码分离到不同的组件。而且，由于每个组件都有自己的注释实例-创建局部变量并在其中显示/显示注释不会有问题。

我创建了一个示例，说明如何实现：stackblitz

如何仅显示点击的供稿的注释

3 个答案: