如何从列头数组为Angular表格单元格添加data-cell属性

我通过文末的列数组与行数组在Angular中创建了一个表格。尝试通过编程方式为每个单元格添加data-cell属性，虽然成功添加上了属性，但无法为每个单元格设置对应的列头数据。

桌面端表格展示正常，移动端我要切换为堆叠样式（见下方图片），希望借助data-cell属性将列头显示在对应单元格数据的上方，也就是当前图片中冒号的位置。

目前我写了如下代码，需要帮忙完成最终实现：

const tds = Array.from(document.querySelectorAll('td'));

// 以编程方式添加data-cell属性
tds.forEach(td => {
  this.columns.forEach((col) => {
      td.setAttribute('data-cell', col.header)
  })      
})

// 期望最终效果如下...
// <td data-cell="Beverages"

列与行数据定义 #

interface TableColumn {
  header: string;
  key: string;
  sortable: boolean;
  cell: (item: any) => string | number;
}

let columns: TableColumn[] = [
  {
    header: "Beverages",
    key: "name",
    sortable: true,
    cell: (item: any) => {
      return item.name;
    }
  },
  {
    header: "Cost",
    key: "cost",
    sortable: true,
    cell: (item: any) => {
      return item.cost;
    },
  },
  {
    header: "Text",
    key: "text",
    sortable: true,
    cell: (item: any) => {
      return item.text ? "Yes" : "No";
    },
  },
  {
    header: "Date",
    key: "date",
    sortable: true,
    cell: (item: any) => {
      return item.date;
    },
  },
  {
    header: "Unsortable",
    key: "unsortable",
    sortable: false,
    cell: (item: any) => {
      return item.unsortable;
    },
  }
]

let rows: any[] = [
  {
    id: 1,
    name: "Water",
    cost: 100,
    text: true,
    date: "05021967",
    unsortable: "12 Fountain Street, Andover, MA"
  },
  {
    id: 2,
    name: "Soda",
    cost: 250,
    text: false,
    date: "12121963",
    unsortable: "23 Oakland Avenue, Louisville, KY"
  },
  {
    id: 3,
    name: "Coffee/Tea",
    cost: 50,
    text: true,
    date: "03111964",
    unsortable: "4 Maple Road, Stone Mountain, GA"
  }
]

内容的提问来源于stack exchange，提问作者user3472810