Angular 当我单击子组件的输入时，会显示一个div，如何一次创建一个div或隐藏其他div？

我有一个名为“mycomponent”的子组件，代码如下：

import { Component,Input } from "@angular/core";
@Component({
selector: "mycomponent",
templateUrl: "./mycomponent.html"
})
export class MyComponent {
@Input() myArray: any;
bShow:boolean=false;
constructor() {
}
}

<input type="text" (click)="bShow=true" >{{myArray}}
<div style="border:1px solid red; width:200px; height:50px;" 
*ngIf="bShow==true">
 data: {{myArray}}
 <br>
 <button (click)="bShow=false">close</button>
 </div>

从“@angular/core”导入{Component，Input}”；
@组成部分({
选择器：“mycomponent”，
templateUrl:“./mycomponent.html”
})
导出类MyComponent{
@Input（）myArray：任意；
bShow:boolean=false；
构造函数（）{
}
}
{{myArray}}
数据：{{myArray}}


关闭

我在app.ts中调用它：

<ng-container *ngFor="let item of myArray">
  <mycomponent [myArray]="item"></mycomponent>
  <br>
 </ng-container>

当我单击mycomponent的输入时，会显示一个div

如何使此div仅显示在我单击的当前组件中，并将其隐藏在其他组件中

在此处输入图像描述

这是我的现场代码：

将所有子组件声明为父组件中的ViewChildren

将ViewChildren强制转换为QueryList数组

这将允许您迭代每个子组件

现在，当一个组件展开时，您可以迭代所有其他组件并关闭它们

@ViewChildren（MyComponent）myComponents:QueryList

}

即使使用这种方法，您也需要某种方法来识别活动组件。现在大多数东西都是数据驱动的，所以id或索引就可以了

someMethod(id: string) {
 //Cast to array and iterate
 myComponents.toArray((c:MyComponent) => {
       c.id === id ? null : c.bShow = false;
 })

---

跟踪在父组件中选择了

myArray

中的哪个索引。仅当所选索引与循环中当前项的索引匹配时才显示div。@Brandon Friend，请原谅。我已经把密码放好了，你能重复一下你说的吗？我不明白您需要父组件上的属性来保存所选元素的索引。您的

*ngIf

需要使用该值，并将其与循环中项目的索引进行比较。这样，循环中只有一个组件一次显示“数据”部分。@Brandon请原谅我的无知，我的想法是永远不要隐藏

输入

而只隐藏'div'。但我不会总是发送一个带有有序数字的数组，您要隐藏的元素与此无关。同样的逻辑也适用

someMethod(id: string) {
 //Cast to array and iterate
 myComponents.toArray((c:MyComponent) => {
       c.id === id ? null : c.bShow = false;
 })