下拉式不使用語義UI的角度工作

Question

下拉菜單不顯示項目。請參閱下面的源代碼。

<div class = "ui centered grid"> 
    <div class = "ten wide column"> 
    <form class = "ui form"> 
     <h4 class = "ui dividing header">Personal details</h4> 
     <div class = "field"> 
     <label>Name</label> 
     <div class = "two fields"> 
      <div class = "field"> 
      <input type= "text" name="firstName" placeholder="First name"> 
      </div> 
      <div class = "field"> 
      <input type= "text" name="lastName" placeholder="Last name"> 
      </div> 
     </div> 

     <div class = "two fields"> 
      <div class = "field"> 
      <input type= "text" name="fathersName" placeholder="Father's name"> 
      </div> 
      <div class = "field"> 
      <input type= "text" name="mothersName" placeholder="Mother's name"> 
      </div> 
     </div> 

     <div class = "two fields"> 
      <div class = "field"> 
      <input type= "text" name="displayName" placeholder="Display name"> 
      </div> 
      <div class = "field"> 
      <input type= "text" name="mobileNumber" placeholder="Mobile number"> 
      </div> 
     </div> 

     <div class = "two fields"> 
      <div class = "field"> 
      <input type= "text" name="birthDate" placeholder="Birth date"> 
      </div> 
      <div class = "field"> 
       <div class = "ui selection dropdown"> 
        <input type="hidden" name = "gender"> 
        <i class = "dropdown icon"></i> 
        <div class = "default text">Gender</div> 
        <div class = "menu"> 
         <div class = "item" data-value = "male">Male</div> 
         <div class = "item" data-value = "female">Female</div> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 

     <h4 class = "ui dividing header">Native details</h4> 

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

當我點擊它的性別不顯示任何內容。

Answer 1

爲什麼不使用常規的select？

<select class="form-control" [(ngModel)]="gender"> 
    <option value="male">Male</option> 
    <option value="female">Female</option> 
</select>