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>

我的切换Looks like 我的问题是，当我单击切换按钮时，它应该会出现“输入接送位置”，如果再次单击切换按钮，它应该会显示城市列表。

我们如何实现这一目标？谁能帮我

Answer 1

将div保持切换按钮上的public class ApplicationName extends MultiDexApplication{ ..... @Override protected void attachBaseContext(Context base) { super.attachBaseContext(base); MultiDex.install(this); } }添加为：

click

TS

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

无需在visability=true; toggleTextBox(){ this.visability = !this.visability; }下的div中使用(click)="showTextBox()"。

Answer 2

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

(click)="visability = !visability"

ng如果以角度4显示或隐藏

2 个答案: