角单选按钮单击“显示”并隐藏不工作。

Question

我是角的初学者，当我点击单选按钮显示并隐藏div区域时，尝试创建角5。，当我单击customer-2单选按钮时，我创建了customer-1和customer-2单选按钮--它不工作(如1 div所示)，其中一个是正常的html才能正常工作，但它不是角5，有人知道如何在Angular5中正确地放置这个按钮吗？

谢谢

html

<div class="modal fade cust-my-modal cust-my-modal-2" id="signup_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">SIGN UP</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <div class="top-radio">
              <div class="radio radio-primary">
                <input type="radio" name="radio1" id="radio1" onClick="changediv('nc_signup')" checked="checked" value="option1">
                <label for="radio1">
                 customers-1
                </label>
              </div>
              <div class="radio radio-primary">
                <input type="radio" name="radio1" id="radio2" onClick="changediv('cc_signup')" value="option2">
                <label for="radio2">
                 customers-2
                </label>
              </div>
            </div>
            <form class="fotm" id="cc_signup" style="display: none;" action="rfq.html">
              <div class="frm-btm-mrg">
                <div class="form-group">
                  <input class="form-control" placeholder="Email id" type="text">
                </div>
                <div class="form-group">
                  <input class="form-control" placeholder="Password"  type="password">
                </div>
                <div class="form-group">
                  <input class="form-control" placeholder="Re-enter password"  type="password">
                </div>

                <div class="form-group">
                  <input class="form-control" placeholder="Company name" type="text">
                </div>
                <div class="form-group">
                  <input class="form-control" placeholder="Website" type="text">
                </div>
                <div class="form-group">
                  <input class="form-control contact-num" placeholder="Contact number" type="text">
                </div>
                <div class="checkbox">
                  <input id="checkbox2" type="checkbox">
                  <label for="checkbox2">
                    I agree terms & conditions
                  </label>
                </div>
              </div>

              <button type="submit" class="btn">Sign up</button>
            </form>


            <form class="fotm" id="nc_signup" action="rfq.html">

              <div class="frm-btm-mrg-2">
                <div class="form-group">
                  <input class="form-control" placeholder="User name" type="text">
                </div>
                <div class="form-group">
                  <input class="form-control" placeholder="Email id" type="text">
                </div>
                <div class="form-group">
                  <input class="form-control" placeholder="Password"  type="password">
                </div>
                <div class="form-group">
                  <input class="form-control" placeholder="Re-enter password"  type="password">
                </div>
                <div class="checkbox">
                  <input id="checkbox3" type="checkbox">
                  <label for="checkbox3">
                    I agree terms & conditions
                  </label>
                </div>
              </div>

              <button type="submit" class="btn">Sign ups</button>
            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

实时代码- stackblitz

javascript

<script>  
    function changediv(divid){
        $("#nc_signup").hide();
        $("#cc_signup").hide();
        $("#"+ divid).show();

    }
</script>

​

 function changediv(divid)
  {
    $("#nc_signup").hide();
    $("#cc_signup").hide();
    $("#"+ divid).show();

  }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <div class="modal fade cust-my-modal cust-my-modal-2" id="signup_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">SIGN UP</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-12">
                <div class="top-radio">
                  <div class="radio radio-primary">
                    <input type="radio" name="radio1" id="radio1" onClick="changediv('nc_signup')" checked="checked" value="option1">
                    <label for="radio1">
                     customers-1
                    </label>
                  </div>
                  <div class="radio radio-primary">
                    <input type="radio" name="radio1" id="radio2" onClick="changediv('cc_signup')" value="option2">
                    <label for="radio2">
                     customers-2
                    </label>
                  </div>
                </div>
                <form class="fotm" id="cc_signup" style="display: none;" action="rfq.html">
                  <div class="frm-btm-mrg">
                    <div class="form-group">
                      <input class="form-control" placeholder="Email id" type="text">
                    </div>
                    <div class="form-group">
                      <input class="form-control" placeholder="Password"  type="password">
                    </div>
                    <div class="form-group">
                      <input class="form-control" placeholder="Re-enter password"  type="password">
                    </div>

                    <div class="form-group">
                      <input class="form-control" placeholder="Company name" type="text">
                    </div>
                    <div class="form-group">
                      <input class="form-control" placeholder="Website" type="text">
                    </div>
                    <div class="form-group">
                      <input class="form-control contact-num" placeholder="Contact number" type="text">
                    </div>
                    <div class="checkbox">
                      <input id="checkbox2" type="checkbox">
                      <label for="checkbox2">
                        I agree terms & conditions
                      </label>
                    </div>
                  </div>

                  <button type="submit" class="btn">Sign up</button>
                </form>


                <form class="fotm" id="nc_signup" action="rfq.html">

                  <div class="frm-btm-mrg-2">
                    <div class="form-group">
                      <input class="form-control" placeholder="User name" type="text">
                    </div>
                    <div class="form-group">
                      <input class="form-control" placeholder="Email id" type="text">
                    </div>
                    <div class="form-group">
                      <input class="form-control" placeholder="Password"  type="password">
                    </div>
                    <div class="form-group">
                      <input class="form-control" placeholder="Re-enter password"  type="password">
                    </div>
                    <div class="checkbox">
                      <input id="checkbox3" type="checkbox">
                      <label for="checkbox3">
                        I agree terms & conditions
                      </label>
                    </div>
                  </div>

                  <button type="submit" class="btn">Sign ups</button>
                </form>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

​

Answer 1

要做到这一点，最好的方法是将代码放在app.component.ts中，而不是放在带有jquery选择器的脚本标记中。

类中应该有两个成员变量，这些变量由组件中的一个方法更改，然后通过在HTML中使用(单击)绑定到该方法。要绑定到代码中的变量，请使用attr-语法。

您可以在这里查看我的代码分叉，https://stackblitz.com/edit/angular-ktt3ri