Convert Select-Option UL-LI angulaire

Question

J'émigre de js à angulaire et ont rencontré une situation bizarre, je l'avais conçu mon DOM pour convertir tous les fichiers HTML Sélectionnez étiquette UL en utilisant ce script JS:

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); 

maintenant sur le côté HTML j'utiliser une enveloppe sur la balise select

  <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> 

Ma question est de savoir comment puis-je effectuer cette conversion de la charge de document dans angulaire depuis tapuscrit renvoie une erreur lors de l'utilisation querySelectorAll (» forme. -ctrl '). forEach() et beaucoup d'autres fonctions communes que j'ai pu utiliser en javascript.

Mise à jour ==> déjà essayé d'exécuter l'action à l'aide d'une fonction sur 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; 
    }); 
    } 
}); 

}

Answer 1

Juste converti votre code JS en TS, s'il vous plaît essayez d'exécuter le même.

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; 
      }); 
      } 
     }); 
     } 
    }