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

Question

我想要什么：

我想一个接一个地打印objectArray中的对象，点击后在其下方显示AdditionalObjectArray中的其他对象，如下所示：

object1Name
object2Name
object3Name
object4Name

当我点击对象1时，例如我想得到的名称：

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。为什么会这样，以及如何正确地做到这一点？

Answer 1

它正按照你告诉它的做。对于外部ngFor的每个循环，都有一个内部div等待showAdditionalObjects布尔值为true，然后输出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显示它们的子项，你需要想出一种不同的方法来使用循环的索引来控制可见性。