需要向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>

我要实现的目标是在第三列的每个单元格旁边添加一个复制按钮。

我还希望每个单元格都有一个唯一的ID，以便我可以使用ngx-clipboard指令作为目标。例如，点击链接

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

我也创建了一个stackblitz示例。 https://stackblitz.com/edit/angular-s5g1b5

请帮助我为每个单元格添加唯一ID，然后我将转向添加ngx-clipboard。（我在stackblitz中添加了尝试添加唯一ID的注释）