更改 *ngFor 的一个特定 div 的元素

Question

我有这个layout. What I want to do is, when a button Join is clicked, hide that button and show an input field in its place like this, and if another button is clicked the first one returns to its normal state and another input field is displayed like this。

我正在与 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>

Answer 1

您可以为房间对象添加一个属性，例如 '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>

Answer 2

 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 和这两个变量。

更改 *ngFor 的一个特定 div 的元素

Change elements of one specific div of *ngFor

html

css

typescript

angular