使用数据切换和数据目标仅折叠通过 Angular 中的 Ng-For 部署的项目数组中的一项

Question

我怎样才能专门折叠我在 angular 中选择的一组卡片中的一个项目。在我做的这个应用程序中，有一点是我将卡片收集的所有数据及其各自的信息，并且在卡片设计中我包括一个可折叠的功能。关键是我使用 ngfor 公开所有数据，循环数据库回复请求的信息。但是当我请求一张卡片的折叠时，其他卡片也会折叠。

component that bring all the cards 
        <mat-card>

       <div class="col-sm-12 col-md-4" *ngFor="let post of allPortafolio;let i=index">//FOR LOOP BRINGING ALL CARDS
         .......some code 

         <div class="container">
          <div class="row">

            <h4 *ngIf="post.allComments">
              <small><strong>Comments</strong>({{post.allComments.length>0?post.allComments.length:"No comments"}})</small>
            </h4>

            <i class="fa fa-angle-double-down fa-2x" *ngIf="up" (click)="up=!up"  aria-hidden="true" role="button" data-toggle="collapse"
              data-target="#commentOverflow1"> </i>
            <i class="fa fa-angle-double-up fa-2x"*ngIf="!up" (click)="up=!up" aria-hidden="true" role="button" data-toggle="collapse"
            data-target="#commentOverflow1" > </i>//THESE TWO ICONS COLLAPSE UP AND DOWN THE NEXT CONTAINER

            <div class="container"  >
              <div *ngFor="let comment of post.allComments; let ind = index" id="commentOverflow1" class="collapse">
                <small><strong>Published by: {{comment.name}}</strong></small>
                <h6>{{comment.comments}}</h6>
              </div>
            </div>//THIS CONTAINER HAS ALL THE CARDS AFTER NGFOR FUCNTION

          </div>
        </div>
      </mat-card>
</div>

但是正如我解释的那样，主要是数据切换针对特定的 id，最终这个 ngfor 带来了所有数据都收集在具有相同 ID 的卡片中，每当我单击折叠器图标时，所有卡片都会向下或向上折叠，而不仅仅是我订购的那一张

Answer 1

你的问题出在这里：

id="commentOverflow1"

您创建了多张具有相同 ID 的卡片：

data-target="#commentOverflow1"

解决此问题的方法是创建动态 ID：

[data-target]="'#' + 'commentOverflow' + cardIndex"

并且在您的评论元素中还有：

[id]="'commentOverflow' + cardIndex"

最后一件事，您需要用一个可折叠的容器包装您的评论。现在您使用 ngFor 创建了多个评论，并使它们可折叠，每个评论...

Answer 2

@EnriqueGF，当你说component that bring all the cards 时，你的意思是你有一些像

<div *ngFor="let post of AllPost;let i=index">
   <app-card [post]="post">...</app-card>
</div>

?

如果响应为真，则必须正常工作：up 是组件的一个变量，它对每个组件都是唯一的

但是如果你没有组件，else

<div *ngFor="let post of AllPost;let i=index">
   <mat-card>
     ...
   </mat-card>
</div>

您需要将变量 up 转换为数组。那就是声明一个变量数组 up

up:boolean[]=[]

并将你的 up 替换为 up[i]

  <i class="fa fa-angle-double-down fa-2x" *ngIf="up[i]" (click)="up[i]=!up[i]"..> 
  <i class="fa fa-angle-double-up fa-2x" *ngIf="!up[i]" (click)="up[i]=!up[i]"..> 
  <div  *ngIf="up[i]" class="container"  >
     ...
  </div>

你有不同的卡片，你需要不同的变量（或数组）

使用数据切换和数据目标仅折叠通过 Angular 中的 Ng-For 部署的项目数组中的一项

Collapsing only one item of an array of items deployed through a Ng-For in Angular using data-toggle and data-target

angular

ngfor