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方面，我在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>

我的问题是如何在文档加载角度上执行此转换，因为当我使用querySelectorAll（'。form-ctrl'）。forEach（）以及我能够在其中使用的许多其他常用函数时，typescript会引发错误普通的javascript。

更新==＆gt;试图使用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，请尝试运行相同的。

$ ghci
GHCi, version 8.2.1: http://www.haskell.org/ghc/  :? for help
Prelude> 

<interactive>:1:1: error: lexical error at character '\EOT'
Prelude> ^D

<interactive>:2:1: error: lexical error at character '\EOT'
Prelude> :quit
Leaving GHCi.

将Select-Option转换为角度的UL-LI

1 个答案: