隐藏/仅显示一个子组件

Question

我在 ngFor 中有一个子组件列表：

<ng-container *ngFor="let field of fields">

 <button (click)="show = !show">Show</button>

 <ng-container *ngIf="show">

  <app-field [fieldInfo]="field"></app-field>

 </ng-container>

</ng-container>

我只想显示这个特定的app-field组件 if showis true，但这显然不是这样，因为它设置show为true所有渲染的组件。

我的问题实际上是我无法显示所有内容，app-fields因为它们在显示时将我的应用程序变成一团乱麻（将有数百个），所以我只想在需要时显示它们。

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

Answer 1

show变量是全局的，更新显示值将反映所有app-field组件，因此您需要单独确定并指定每个组件的显示/隐藏变量。为此，您应该在字段对象内添加一个显示成员，如下所示：<ng-container *ngFor="let field of fields">&nbsp;<button (click)="field.show = !field.show">Show</button>&nbsp;<ng-container *ngIf="field.show">&nbsp; <app-field [fieldInfo]="field"></app-field>&nbsp;</ng-container></ng-container>也找到了类似的解决方案，检查这个答案

Answer 2

我只需要在设置为可见时将组件附加到 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这会在is时破坏组件false，这正是我在这种情况下所需要的。