javascript - 如何从使用 ngFor 指令动态添加的 HTML 表中恢复标题单元格数据

Question

我正在尝试从我的 typescript .ts 文件中的数组标题中检索单元格数据。知道这些<th>使用 ngFor 动态生成单元格指示。我只得到用 hard (action, a, b, c, d) 写的列名，而不是从我的 API 动态生成的其他名称。我想检索动态生成的列名。

这是我的 HTML 文件:

<table class="table table-striped">
  <thead id="thead">
    <tr id="head">
      <th class="columnName">Action</th>
      <th class="columnName">a</th>
      <th class="columnName">b</th>
      <th class="columnName">c</th>
      <th class="columnName">d</th>
      <th scope="col" *ngFor="let column of table.columns" class="columnName">{{ column.name }}</th>
    </tr>
  </thead>
</table>

这是我的 component.ts 文件

getColumnName() {
    const theadRow = document.getElementsByClassName('columnName');
    // const thList = theadRow.children;
    console.log(theadRow);

    for (let i = 0; i < 23; i++) {
      console.log(theadRow[i].innerHTML);
    }

这是我的结果:

Answer 1

您可以调用 var names = table.columns.map(col => col.name) 来提取名称。

这里有关于 Array.map() 的更多信息