隐藏/仅显示一个子组件

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">

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

 <ng-container *ngIf="field.show">

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

 </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，这正是我在这种情况下所需要的。