將選擇選項轉換為角度的UL-LI

Question

我正在從js遷移到有角度的情況，遇到了一種奇怪的情況，我設計了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（）和其他我可以在普通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;
            });
          }
        });
      }
    }