How to remove unselected options from drop-down lists within a table in Angular 7

I need to export several tables to excel, I have a component that is always in all the other components and has the function of exporting, in each component I have a table with id 'table' which will be exported.

The problem I have now is that I have inputs within the tables and drop-down lists created with ngFor, but the data entered for the input is not taken by the excel and for the drop-down lists, the function obtains all the options and I need to have only the selected one.

My English is not good, I hope you understood

Solve the inputs by replacing them with the selected value but trying to eliminate unselected options with jQuery, The drop-down list always eliminates all options because it does not detect the selected option.

At this moment I do not know how to do it with 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’);

}

}

I hope to find a way to eliminate these options or if it is easier to find another library that allows me to export to excel with all the functionality I need

#javascript #jquery #angular-js #html