ngFor 在单击时获取数据并将其显示在单击的元素下答案

【问题标题】：ngFor get data on click and display it under clicked elementngFor 在单击时获取数据并将其显示在单击的元素下
【发布时间】：2021-02-01 00:49:52
【问题描述】：

我想要什么：

我想将objectArray中的对象一一打印出来，点击后在其下方显示AdditionalObjectArray中的additionalObject，如下所示：

object1Name
object2Name
object3Name
object4Name

例如，当我单击 object1Name 时，我想获取：

object1Name
    additionalObject1ForObject1
    additionalObject2ForObject1
object2Name
object3Name
object4Name

这是我的代码：

<ng-container *ngFor="let object of objectArray" >
    <div (click)="populateAdditionalObjectArray(object.id)">
        {{object.name}}
    </div>
    <ng-container *ngIf="showAdditionalObjects">
        <div *ngFor="let additionalObject of AdditionalObjectArray">
            {{additionalObject.name}}
        </div>
    </ng-container>
    <hr>
</ng-container>

这是我点击object1Name时得到的：

object1Name
    additionalObject1ForObject1
    additionalObject2ForObject1
object2Name
    additionalObject1ForObject1
    additionalObject2ForObject1
object3Name
    additionalObject1ForObject1
    additionalObject2ForObject1
object4Name
    additionalObject1ForObject1
    additionalObject2ForObject1

它为每个条目从Object1 打印出additionalObject1 和2。为什么会这样以及如何正确执行？

【问题讨论】：

如果有足够信誉的人遇到这个问题，请告诉我为什么我会被否决。不清楚我想要什么？我的尝试还不够吗？这个问题你可以在网上轻松找到解决方案吗？谢谢！

标签： arrays angular ngfor

【解决方案1】：

它正在做你告诉它做的事情。对于外部 ngFor 的每个循环，都有一个内部 div 等待直到 showAdditionalObjects 布尔值为真，然后输出 AdditionalObjectArray 项的内容。

在您的点击事件代码中，您可能会将对象一的子项添加到 AdditionalObjectArray 并将 showAdditionalObjects 设置为 true。

有几种方法可以解决这个问题，但是通过向外部循环添加一个索引并添加一个新变量，您可以控制显示哪个 div。

如下修改代码，在 ts 文件中添加一个名为 showIndex 的新变量。将索引传递给点击代码并将showIndex 设置为该值。

<ng-container *ngFor="let object of objectArray; let i = index;" >
   <div (click)="populateAdditionalObjectArray(object.id, i)">
    {{object.name}}
   </div>
   <ng-container *ngIf="showAdditionalObjects && showIndex === i">
      <div *ngFor="let additionalObject of AdditionalObjectArray">
        {{additionalObject.name}}
      </div>
   </ng-container>
   <hr>
</ng-container>

现在只有被点击的 div 会显示子项目。如果你想让多个 div 显示它们的子项，你需要想出一种不同的方式来使用循环的索引来控制可见性。

【讨论】：