ngIf 以 4 角顯示或隱藏

Question

我在component.ts有如下功能

    visability=true;
    showTextBox(){
      debugger;
      this.visability = false;

    }

在component.html下面的代碼中我有

       <div class="col-sm">
          <div class="toggle">
            <input type="checkbox"  class="check">
            <!-- (click)="show=!show" -->
            <b class="b switch" ></b>
            <b class="b track"></b>
          </div>
          <h4 id="door-delivery">Door Delivery</h4>
        </div>
        <div class="col-sm address">
          <div *ngIf="!visability" (click)="showTextBox()">
            <input class="form-control " type="text" placeholder="Enter Address">
          </div>
          <div *ngIf="visability" (click)="showTextBox()">
            <select formControlName="pickup_location" class="form-control selectpicker" id="select-city" data-live-search="true" required>
              <option data-tokens="" disabled>
                <h2>Pickup location...</h2>
              </option>
              <option data-tokens="India">
                <h2>India</h2>
              </option>
              <option data-tokens="UAE">
                <h2>UAE</h2>
              </option>
              <option data-tokens="Japan">
                <h2>Japan</h2>
              </option>
            </select>
          </div>
        </div>

我的切換看起來像我的問題是當我點擊切換時，它應該出現 輸入取貨地點，如果我再次點擊切換，它應該顯示城市列表。

我們如何才能做到這一點？ 誰能幫助我

Answer 1

添加click您的 div 按住切換按鈕為：

<div class="toggle" (click)=toggleTextBox()>
    <input type="checkbox"  class="check">
    <b class="b switch" ></b>
    <b class="b track"></b>
</div>

TS

visability=true;
toggleTextBox(){
  this.visability = !this.visability;
}

<div class="col-sm address">下的<div class="col-sm address">不需要(click)="showTextBox()" 。

Answer 2

您可以直接在模板中使用：

(click)="visability = !visability"