仅隐藏/显示一个子组件

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>

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

我的问题真的是我无法显示所有的 app-fields，因为它们在显示时会使我的应用程序变得一团糟（会有数百个），so 我只想显示它们当他们需要时。

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

Answer 1

我只需要在设置为可见时将组件附加到 DOM。用答案解决它：Thierry Templier answer here

父组件内部：

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 引导我找到答案。

Answer 2

show 变量是全局变量，show 的更新值将反映所有app-field 组件，因此您需要为每个组件单独确定和指定一个显示/隐藏变量。 p>

为此，您应该在字段 Object 中添加一个 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>

也找到了类似的解决方案，看看这个answer