如何从Angular 7中的表中的下拉列表中删除未选择的选项

Question

我需要导出几个表格以达到卓越的效果，我有一个组件始终存在于所有其他组件中，并且具有导出功能，在每个组件中我都有一个ID为'table'的表，该表将被导出。

我现在遇到的问题是我在用ngFor创建的表和下拉列表中有输入，但是为输入输入的数据不被excel接受，对于下拉列表，该函数获取所有选项，并且我只需要选择一个。

我的英语不好，希望你能理解

通过将输入替换为选定的值来解决输入问题，但尝试使用jQuery消除未选择的选项，下拉列表始终会消除所有选项，因为它不会检测到选定的选项。

目前，我不知道如何使用Typescript。

export() {
{
  const myTable = document.getElementById('table');
  const myClone = myTable.cloneNode(true);

  // Delete options unselected
  $($(myClone).find('select')).each((index, element) => {
    $(element).find('option').not(':selected').remove();
  });

  // Replace input for value
  $($(myClone).find('input')).each((index, element) => {
    $(element).replaceWith(element.value);
  });

  const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(myClone);
  const wb: XLSX.WorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  /* save to file */
  XLSX.writeFile(wb, 'SheetJS.xlsx');
 }
}

我希望找到一种方法来消除这些选项，或者是否更容易找到另一个库，该库可以让我导出所需的所有功能并转换为excel

Answer 1

我找到了需要使用jQuery的功能

// Delete option unselected
$($(myClone).find('select')).each((i, element) => {
  const valueSelected = $(element).attr('ng-reflect-model');
  $($(element).find('option')).each((index, item) => {
    if (item.value !== valueSelected) {
      $(item).remove();
    }
  });
});      

目前此方法正在起作用，最好使用TypeScript中的elementRef，这将是下一步。

我希望我对此有所帮助。