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

【问题标题】：How to remove unselected options from drop-down lists within a table in Angular 7如何从Angular 7表格中的下拉列表中删除未选择的选项
【发布时间】：2019-01-21 22:25:33
【问题描述】：

我需要导出几个表到excel，我有一个组件，它总是在所有其他组件中并具有导出功能，在每个组件中我都有一个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

【问题讨论】：

那不是已经是 TypeScript 了吗？
您不应该不惜一切代价将 jQuery 与 Angular 一起使用。使用 Angular。
@Edric 我指的是我在 jquery 中所做的，即与打字稿有关。
正如@theblindprophet 所说，我应该尝试只使用Angular，所以我将创建一个服务来获取ElementRef 表并获取这个nativeElement，我将很快带来这些更改的更新，但问题是我无法识别使用 nativeElement 选择的选项的文本或值，因为下拉菜单是使用 ngFor 创建的，并且 nativeElement 检测到默认值，如 selected，感谢您的 cmets。

标签： javascript jquery html angular typescript

【解决方案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，以便下一步。

我希望我已经帮助了某人。

【讨论】：