ngFor 获取点击数据并显示在被点击元素下

Question

我想要的：

我想一个一个地打印来自 objectArray 的对象，然后单击它以在其下方显示来自 AdditionalObjectArray 的附加对象，如下所示：

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

Answer 1

它完全按照您的指示进行操作。对于外部 ngFor 的每个循环，都有一个内部 div 等待 showAdditionalObjects 布尔值为真，然后输出 AdditionalObjectArray 项的内容。

在您的点击事件代码中，您大概是将对象一的 sub-items 添加到 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 才会显示子项目。如果你想让 multi divs 显示它们的子项目，你需要想出一种不同的方法来使用循环的索引来控制可见性。

ngFor 获取点击数据并显示在被点击元素下

ngFor get data on click and display it under clicked element

arrays

angular

ngfor