我有這個布局。我想要做的是，當單擊一個按鈕時Join，隱藏該按鈕并在其位置顯示一個輸入欄位，如下所示，如果單擊另一個按鈕，則第一個按鈕回傳其正常狀態，另一個輸入欄位顯示如下。
我正在使用 Angular 13。這是相關 div 的代碼片段。
<div *ngIf='show === "default"' class="list">
<div class="form-listItem" *ngFor="let room of roomList">
{{ room }}
<button class="formBtn" (click)="enterPassword($event.target)" id="{{ room }}">Join</button>
<div class="joinRoomPasswordContainer" id="{{ room }}-">
<input class="joinRoomPassword" type="password" placeholder="********">
<button class="joinRoomBtn">
<img class="rightArrow" src="/assets/rightArrow.svg" alt="">
</button>
</div>
</div>
</div>
uj5u.com熱心網友回復：
您可以為房間物件添加一個屬性，例如“joined”，然后添加 ngIf 指令以更改視圖
<button class="formBtn" *ngIf="!room.joined" (click)="enterPassword($event.target); room.joined = true" id="{{ room
}}">Join</button>
<div class="joinRoomPasswordContainer" id="{{ room }}-" *ngIf="room.joined">
<input class="joinRoomPassword" type="password" placeholder="********">
<button class="joinRoomBtn">
<img class="rightArrow" src="/assets/rightArrow.svg" alt="">
</button>
</div>
uj5u.com熱心網友回復：
In the Ts file you initialize two variable with boolean type true and false.
and create write a fun like:-
func1(){
this.a = true;
this.b = false;
}
在按鈕和要打開的面板上呼叫此函式，單擊該 div 給 - *ngIf 與這兩個變數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/476046.html
下一篇：在打字稿中回傳未定義的狀態