将选择选项转换为角度的 UL-LI

Question

我正在从js迁移到angular，遇到了一个奇怪的情况，我设计了我的DOM，使用这个JS脚本将所有HTML Select标签转换为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 端，我在选择标签上使用包装器

            <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（'.form-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;
    });
  }
});

}

Answer 1

刚刚将您的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;
            });
          }
        });
      }
    }