Angular

Question

我在显示包含列和行 headers 的 table 中的数据时遇到问题。我试图通过使用 *ngFor 使其动态化。你能建议在这种情况下如何处理 *ngFor 吗？

包含数据的 Ts 文件：

export class NewScreen {
  rows = [
    'Name',
    'Surname',
    'Subjects',
    'Grade',
  ];

  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'],
      grade: ['A','A'],
    },
  ];
}

HTML: 我一直在尝试找到解决方案放入 {{???}} 中，这将导致显示以下 table 结构，但没有运气：

<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 }}</th>
         <td *ngFor="let value of data | keyvalue">{{ value.value[i + 1] }}</td>
     </tr>
  </tbody>
</table>

Answer 1

我根据 HTML 和您提供的数据创建了一个简单示例 https://stackblitz.com/edit/angular-vuzjyk

{{ item.value }} 显示 [object Object] 的原因是您没有给它一个标识符来选择您希望显示的 object 的属性。

为了简化，我更新了您的 rows[] 以匹配您的数据键以直接使用它。

  rows = ['name', 'surname', 'subjects', 'grade'];

在 HTML 中，我只是使用该行来标识我们希望显示的属性。同样在 <th> 中，我将每个 header.

的第一个字母大写

   <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>

查看我上面给出的 stackblitz link，如果您有任何疑问，请随时提问。

Angular - 使用 ngFor 显示包含列和行的数据 headers

Angular - using ngFor to display data with column and row headers

javascript

html

html-table

ngfor