Angular

Question

我正在尝试将 table 元素动态划分到它自己的单独列中。我想要的输出如下所示：

name 和 surname 的值始终为 1，但 subjects 和 grade 的值是动态的（可以有 2 列或更多列）。

这是我的数据：

data = [
    {
      student: 'Student 1',
      name: 'Alex',
      surname: 'Smith',
      subjects: ['Math','Geometry'],
      grade: ['A','B'],
    },
    {
      student: 'Student 2',
      name: 'Michael',
      surname: 'Laurent',
      subjects: ['Math','Geometry'],
      grade: ['B','C'],
    },
    {
      student: 'Student 3',
      name: 'Sophie',
      surname: 'Miller',
      subjects: ['Math','Geometry','English'],
      grade: ['A','A','B'],
    },
  ];

HTML:

<table>
  <thead>
     <tr>
        <th></th>
        <th *ngFor="let column of data">{{ column.student }}</th>
     </tr>
  </thead>
  <tbody>
     <tr *ngFor="let row of rows">
         <th>{{ row.charAt(0).toUpperCase() + row.slice(1) }}</th>
         <td *ngFor="let item of data">{{ item[row] }}</td>
     </tr>
  </tbody>
</table>

这是一个 stackblitz 示例：https://stackblitz.com/edit/angular-pzgohu 有人知道什么是解决方案吗？我试图将 span 放在 td 标签内并循环遍历 .length，但是当我将 length 放在字符串上时它会出错。

Answer 1

您可以使用基于行值的条件，也可以使用 typeof 来检查它是字符串还是数组 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

<table>
  <thead>
    <tr>
      <th></th>
      <th *ngFor="let column of data">{{ column.student }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows">
      <th>{{ row.charAt(0).toUpperCase() + row.slice(1) }}</th>
      <td *ngFor="let item of data">
        <span *ngIf="row !== 'subjects' && row !== 'grade'">
          {{ item[row] }}
        </span>

        <table *ngIf="row === 'subjects' || row === 'grade'">
          <tr>
            <td *ngFor="let subItem of item[row]">
              {{ subItem }}
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Angular - 动态地将 td 标签分成单独的列

Angular - divide td tag into separate columns dynamically

html

javascript

html-table

typescript