Нужно добавить кнопку копирования в каждую ячейку столбца в HTML

Question

Я пытаюсь использовать модуль ngx-clipboard в своем угловом приложении.

Данные в таблице поступают из службы, и я использую jsonToTable() для вставки динамической таблицы.

component.ts

generateOverrideCode(){

try {
    document.getElementById('tableGoesHere').innerHTML = this.jsonToTable(data, 'table table-sm table-dark');
  } 
catch (ex) {
  console.log('--generate override code', ex);  
}
}


capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

jsonToTable(json, classes){

var cols = Object.keys(json[0]);

var headerRow = '';
var bodyRows = '';

classes = classes || '';

cols.map((col)=>{
  headerRow += '<th>' + this.capitalizeFirstLetter(col) + '</th>';
});

json.map((row)=> {
  bodyRows += '<tr>';

  cols.map((colName)=> {
    if(colName != 'population')
    bodyRows += '<td>' + row[colName] + '</td>';
    else
    bodyRows += '<td id="colName+row">' + row[colName] + '<button></button>' + '</td>';  //I want to add a dynamic id to the button added to each cell of this row, so that i can use the id to target the text of that cell.
  });

  bodyRows += '</tr>';
});

return '<table class="' +
       classes +
       '"><thead><tr>' +
       headerRow +
       '</tr></thead><tbody>' +
       bodyRows +
       '</tbody></table>';
  }
 }
var data = [
{ country: 'China',         population: 1379510000 },
{ country: 'India',         population: 1330780000 },
{ country: 'United States', population:  324788000 },
{ country: 'Indonesia',     population:  260581000 },
{ country: 'Brazil',        population:  206855000 },
];

component.html

<div class="row">
             <div class="col-sm-12">
                <button (click)="generateOverrideCode()">Generate</button>
            </div>
            </div>
            <div id="tableGoesHere"></div>

Я пытаюсь добиться добавления кнопки копирования рядом с каждой ячейкой в ​​третьем столбце.

Я также хочу, чтобы каждая ячейка имела уникальный идентификатор, чтобы я мог нацелить ее, используя директиву ngx-clipboard.Перейдите по ссылке, например,

https://maxisam.github.io/ngx-clipboard/

Я также создал пример стекаблица.https://stackblitz.com/edit/angular-s5g1b5

Пожалуйста, помогите мне добавить уникальный идентификатор в каждую ячейку, тогда я перейду к добавлению ngx-буфера обмена (я добавил комментарии в stackblitz, где я пытался добавить уникальный идентификатор)