已解決430363個問題，去搜搜看，總會有你想問的

隱藏/僅顯示一個子組件

首頁猿問隱藏/僅顯示一個子組件

隱藏/僅顯示一個子組件

JavaScript

白豬掌柜的 2023-10-20 16:32:36

我在 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因為它們在顯示時將我的應用程序變成一團亂麻（將有數百個），所以我只想在需要時顯示它們。如何在單擊時打開/關閉每個特定組件的渲染？或者我可以研究其他解決方案嗎？

查看完整描述

2 回答

弒天下

TA貢獻1818條經驗獲得超8個贊

show變量是全局的，更新顯示值將反映所有app-field組件，因此您需要單獨確定并指定每個組件的顯示/隱藏變量。

為此，您應該在字段對象內添加一個顯示成員，如下所示：

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

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

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

</ng-container>

也找到了類似的解決方案，檢查這個答案

反對回復 2023-10-20

Helenr

TA貢獻1780條經驗獲得超4個贊

我只需要在設置為可見時將組件附加到 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，這正是我在這種情況下所需要的。

反對回復 2023-10-20

2 回答
0 關注
126 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

隱藏/僅顯示一個子組件

隱藏/僅顯示一個子組件

2 回答

添加回答