Hide/show 只有一个子组件

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我只想在需要时显示它们。

如何在单击时切换每个特定组件的呈现 on/off？或者我可以研究其他解决方案吗？

Answer 1

show 变量是全局变量，show 的更新值将反映所有 app-field 组件，因此您需要确定并指定一个 show/hide 每个组件的单独变量。

为此，您应该在字段对象中添加一个显示成员，如下所示：

<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

Answer 2

我只需要在设置为可见时将组件附加到 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 带我找到答案。

Hide/show 只有一个子组件

Hide/show only one child component

javascript

angular

angular2-template

angular2-directives