转换选择 - 选项 - 在角度

我从爵士到角迁移和所遇到的一个奇怪的情况，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

转换选择 - 选项 - 在角度

回答

相关问题