* ngFor in html angular4

Question

我正在尝试使用*ngFor将我的对象绑定到表上。我想在每个标题下添加数组元素Grade和Names。有没有办法按行追加数组元素？所以它看起来如下：

我的HTML：

<div>
  <table>
      <tr>
          <td colspan="2" style = "text-align: center;"> Names</td>
      </tr>
      <tr>
        <th>Grade</th>
        <th>Names</th>
      </tr>
  </table>
</div>

Answer 1

这可以帮助你

<table>
<thead>
<tr>
<th>Grade</th><th>Names</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of your_data">
<td>{{ data.grade}}</td><td>{{data.name}}</td>
</tr>
</tbody>
</table>

Answer 2

1. 创建数据结构
2. 定义数据结构的数组
3. 在html中插入它并创建一个for循环来迭代数组并绘制每一行。

在 classmate.model.ts

中

export class ClassmateType{
    name: string;
    grade: number;
}

在 component.ts 中 （组件外部）     从'./classmate.model.ts'中导入{ClassmateType};

（组件内部）

classmates :ClassmateType[] = [
   {"billy", 6},
];

在 component.html

中

<div>
  <table>
      <tr>
        <th>Grade</th>
        <th>Names</th>
      </tr>
      <tr *ngFor="let classmate of classmates">
        <td>{{classmate.grade}}</td>
        <td>{{classmate.name}}</td>
      </tr>
  </table>
</div>