轉換選擇 - 選項 - 在角度

我從爵士到角遷移和所遇到的一個奇怪的情況，UL-LI，我設計了我的DOM使用這個JS給所有的HTML選擇標籤轉換爲UL腳本：轉換選擇 - 選項 - 在角度

var coaching = function() {} 
coaching.prototype.customSelect = function(wrapper) { 
wrapper.querySelectorAll('.form-ctrl').forEach(function(elm) { 
    if (elm.tagName == 'SELECT') { 
     var allOptions = elm.getElementsByTagName('option'); 
     var allreadyCustomDropDown = 
elm.parentNode.querySelector('.customDropdown'); 
     if (allreadyCustomDropDown != null) { 
      allreadyCustomDropDown.remove(); 
     } 
     if (allOptions.length > 0) { 
      var listWrapper = document.createElement('ul'); 
      listWrapper.classList.add('customDropdown'); 
      for (var i = 0; i < allOptions.length; i++) { 
       var list = document.createElement('li'); 
       list.innerHTML = allOptions[i].innerHTML; 
       listWrapper.appendChild(list); 
      } 
      elm.parentNode.appendChild(listWrapper); 
      elm.parentNode.classList.add('customSelectWrapper'); 
      listWrapper.querySelectorAll('li').forEach(function(liList) { 
       liList.addEventListener('click', function() { 
        liList.parentNode.parentNode.querySelector('.form- 
ctrl').value = liList.innerHTML; 
        liList.parentNode.parentNode.classList.add('has-value'); 
        liList.parentNode.classList.remove('visibleDropdown'); 
        liList.parentNode.parentNode.querySelector('.form-ctrl').style.opacity = 1; 
       }) 
      }) 
     } 
     // listWrapper.addEventListener 
    } 

}); 
wrapper.querySelectorAll('select.form-ctrl').forEach(function(elm) { 
    elm.addEventListener('click', function() { 
     document.querySelectorAll('.customDropdown').forEach(function(elm1) { 
      elm1.parentNode.querySelector('.customDropdown').classList.remove('visibleDropdown'); 
     }); 
     elm.style.opacity = 0; 
     elm.parentNode.querySelector('.customDropdown').classList.add('visibleDropdown'); 
    }); 
}); 
document.addEventListener('click', (e) => { 
    if (!e.target.parentNode.classList.contains('customDropdown') && !e.target.parentNode.classList.contains('customSelectWrapper')) { 
     document.querySelectorAll('.customDropdown').forEach(function(elm) { 
      elm.classList.remove('visibleDropdown'); 
      elm.parentNode.querySelector('.form-ctrl').style.opacity = 1; 
     }); 
    } 
}); 
} 

var coachingInstance = new coaching(); 
coachingInstance.customSelect(document);

現在對HTML側I使用包裝上的選擇標記

  <div class="field-wrapper"> 
       <select id="enquiryPriority" class="form-ctrl" [(ngModel)]="advancedFilterForm.priority" name="priority" formInput> 
         <option></option> 
         <option *ngFor="let priority of enqPriority" [value]="priority.data_key"> 
          {{priority.data_value}} 
         </option> 
         </select> 
       <label for="enquiryPriority">Enquiry Priority</label> 
      </div>

我的問題是如何能夠在角度上執行文檔負載這種轉換時，我使用querySelectorAll（」自打字稿引發錯誤。形式-ctrl'）。forEach（）以及其他許多我可以在純javascript中使用的常用函數。

更新==>嘗試對ngOnInit

convertSelectToUl() { 

var myNodeListOne = document.querySelectorAll('.form-ctrl'); 

[].forEach.call(myNodeListOne, function (elm) { 
    if (elm.tagName == 'SELECT') { 
    var allOptions = elm.getElementsByTagName('option'); 
    var allreadyCustomDropDown = 
elm.parentNode.querySelector('.customDropdown'); 
    if (allreadyCustomDropDown != null) { 
     allreadyCustomDropDown.remove(); 
    } 
    if (allOptions.length > 0) { 
     var listWrapper = document.createElement('ul'); 
     listWrapper.classList.add('customDropdown'); 
     for (var i = 0; i < allOptions.length; i++) { 
     var list = document.createElement('li'); 
     list.innerHTML = allOptions[i].innerHTML; 
     listWrapper.appendChild(list); 
     } 
     elm.parentNode.appendChild(listWrapper); 
     elm.parentNode.classList.add('customSelectWrapper'); 
     var listNode = listWrapper.querySelectorAll('li'); 
     [].forEach.call(listNode, function (liList) { 
     liList.addEventListener('click', function() { 
      liList.parentNode.parentNode.querySelector('.form-ctrl').value = liList.innerHTML; 
      liList.parentNode.parentNode.classList.add('has-value'); 
      liList.parentNode.classList.remove('visibleDropdown'); 
      liList.parentNode.parentNode.querySelector('.form-ctrl').style.opacity = 1; 
     }) 
     }) 
    } 

    } 
}); 

    var myNodeListTwo = document.querySelectorAll('select.form-ctrl'); 

[].forEach.call(myNodeListTwo, function (elm) { 
    elm.addEventListener('click', function() { 
    var listDropdown = document.querySelectorAll('.customDropdown'); 
    [].forEach.call(listDropdown, function (elm1) { 
     elm1.parentNode.querySelector('.customDropdown').classList.remove('visibleDropdown'); 
    }); 
    elm.style.opacity = 0; 
    elm.parentNode.querySelector('.customDropdown').classList.add('visibleDropdown'); 
    }); 
}); 

document.addEventListener('click', (e) => { 
    let parent = (<HTMLElement>(<HTMLElement>e.target).parentNode); 
    if (!parent.classList.contains('customDropdown') 
    && !parent.classList.contains('customSelectWrapper')) { 
    var nodeDropdown = document.querySelectorAll('.customDropdown'); 
    [].forEach.call(nodeDropdown, function (elm) { 
     elm.classList.remove('visibleDropdown'); 
     elm.parentNode.querySelector('.form-ctrl').style.opacity = 1; 
    }); 
    } 
});

}進行使用功能的作用

來源

2017-10-06 Ronit

您可以在類聲明之上聲明文檔，然後將其用於打字稿類文件。例如聲明讓文件：任何; –

對不起，對於遲到的回覆，@NiralMunjariya我嘗試了相同的，但收到錯誤eventListener不能作用於null。我已經根據TS修改了語法，但沒有運氣。請看一看 – Ronit

只是轉換你的JS代碼到TS，請嘗試運行相同。

declare let document: any; 
    export class Coching { 

     customSelect(wrapper) { 
     wrapper.querySelectorAll('.form-ctrl').forEach((elm) => { 
      if (elm.tagName === 'SELECT') { 
      const allOptions = elm.getElementsByTagName('option'); 
      const allreadyCustomDropDown = 
       elm.parentNode.querySelector('.customDropdown'); 
      if (allreadyCustomDropDown != null) { 
       allreadyCustomDropDown.remove(); 
      } 
      if (allOptions.length > 0) { 
       const listWrapper = document.createElement('ul'); 
       listWrapper.classList.add('customDropdown'); 
       for (let i = 0; i < allOptions.length; i++) { 
       const list = document.createElement('li'); 
       list.innerHTML = allOptions[i].innerHTML; 
       listWrapper.appendChild(list); 
       } 
       elm.parentNode.appendChild(listWrapper); 
       elm.parentNode.classList.add('customSelectWrapper'); 
       listWrapper.querySelectorAll('li').forEach((liList) => { 
       liList.addEventListener('click',() => { 
        liList.parentNode.parentNode.querySelector('.form-ctrl').value = liList.innerHTML; 
        liList.parentNode.parentNode.classList.add('has-value'); 
        liList.parentNode.classList.remove('visibleDropdown'); 
        liList.parentNode.parentNode.querySelector('.form-ctrl').style.opacity = 1; 
       }) 
       }) 
      } 
      // listWrapper.addEventListener 
      } 
     }); 

     wrapper.querySelectorAll('select.form-ctrl').forEach((elm) => { 
      elm.addEventListener('click', function() { 
      document.querySelectorAll('.customDropdown').forEach((elm1) => { 
       elm1.parentNode.querySelector('.customDropdown').classList.remove('visibleDropdown'); 
      }); 
      elm.style.opacity = 0; 
      elm.parentNode.querySelector('.customDropdown').classList.add('visibleDropdown'); 
      }); 
     }); 

     document.addEventListener('click', (e) => { 
      if (!e.target.parentNode.classList.contains('customDropdown') && !e.target.parentNode.classList.contains('customSelectWrapper')) { 
      document.querySelectorAll('.customDropdown').forEach((elm) => { 
       elm.classList.remove('visibleDropdown'); 
       elm.parentNode.querySelector('.form-ctrl').style.opacity = 1; 
      }); 
      } 
     }); 
     } 
    }

來源

2017-10-17 04:33:51

轉換選擇 - 選項 - 在角度

回答

相關問題