Javascript 仅隐藏/显示一个子组件

我有NGF中的子组件列表，用于：

显示

如果

show

为

true

，我只想显示这个特定的

app字段

组件，但显然不是这样，因为它将所有渲染组件的

show

设置为

true

我的问题是我无法显示所有的

应用程序字段

，因为它们在显示时会把我的应用程序弄得一团糟（将有数百个），所以我只想在需要时显示它们

---

如何在单击时打开/关闭每个特定组件的渲染？或者我可以研究其他解决方案吗？

变量是全局变量，show的更新值将反映所有

应用程序字段

组件，因此您需要为每个组件分别确定和指定一个显示/隐藏变量

为此，应在field对象内添加show成员，如下所示：

<ng-container *ngFor="let field of fields">
 <button (click)="field.show = !field.show">Show</button>
 <ng-container *ngIf="field.show">
  <app-field [fieldInfo]="field"></app-field>
 </ng-container>
</ng-container>

显示
show
变量是全局变量，show的更新值将反映所有
应用程序字段
组件，因此您需要为每个组件分别确定和指定一个show/hide变量

为此，应在field对象内添加show成员，如下所示：

<ng-container *ngFor="let field of fields">
 <button (click)="field.show = !field.show">Show</button>
 <ng-container *ngIf="field.show">
  <app-field [fieldInfo]="field"></app-field>
 </ng-container>
</ng-container>


显示
当设置为可见时，我只需要将组件连接到DOM。答案如下：

在父组件内部：

public showField:any={}；

然后在父组件模板中：

<ng-container *ngFor="let field of fields">
 <button (click)="showField[childField.id] = !showField[childField.id]">Show</button>
 <ng-container *ngIf="showField[childField.id]">
  <app-field [fieldInfo]="field"></app-field>
 </ng-container>
</ng-container>


显示

当
*ngIf
为
false
时，这会破坏组件，这正是我在这种情况下所需要的

感谢@yazan为我提供了答案。
我只需要在设置为可见时将组件连接到DOM。答案如下：

在父组件内部：

public showField:any={}；

然后在父组件模板中：

<ng-container *ngFor="let field of fields">
 <button (click)="showField[childField.id] = !showField[childField.id]">Show</button>
 <ng-container *ngIf="showField[childField.id]">
  <app-field [fieldInfo]="field"></app-field>
 </ng-container>
</ng-container>


显示

当
*ngIf
为
false
时，这会破坏组件，这正是我在这种情况下所需要的

感谢@yazan为我提供了答案。
您可以在字段对象内附加一个显示变量您可以在字段对象内附加一个显示变量这不会阻止组件插入DOM吗？只有组件的内容。*ngIf将在条件为真的情况下在DOM中插入任何HTML元素或组件，这就是*ngIf和[hidden]@thierry templier的答案中的主要区别。这不会阻止组件插入DOM吗？只有组件的内容。*ngIf将在条件为真的情况下在DOM中插入任何HTML元素或组件，这就是*ngIf和[hidden]@thierry templier在为我做的回答中的主要区别。